0

I put elements side by side using inline-block. I wanted to make the gap between elements 2px, so I set a negative margin for the span element.

* {
  margin: 0;
}

.content {
  width: 100%;
  min-width: 320px;
}

span {
  display: inline-block;
}

span {
  display: inline-block;
  width: 78px;
  padding: 3px 10px;
  cursor: pointer;
  background: #ddd;
  color: #777;
  margin-right: -2px;
  width: calc(25% - 22px);
}

span:hover {
  background: #eee;
}
<div class="content">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
</div>

Question 1. It worked with Firefox 64.0. However, when checking with Google Chrome 71.0, the last span element went around. Browser's default font size is 16px for Firefox and Chrome.

Also, it worked fine in CodePen, but it did not work properly on the stackoverflow code snippet.

Why are these problems occurring? I have read below question, but it does not appear to be about the reason for this problem.

Screenshot in Firefox (CodePen version): Screenshot in Firefox (CodePen version) Screenshot with Firefox (stackoverflow's run snippet version): Screenshot with Firefox (stackoverflow's run snippet version) Screenshot in Google Chrome: Screenshot in Google Chrome

Question 2. I set width: 25% to make the span element full width. However, the horizontal width did not become full unless 22 px was subtracted from 25% (in Firefox).

How can I calculate a value of 22px? I can't understand why (padding-left + padding-right)*4 - negative-margin = 22px, even though padding-left and padding-right are set in each span element (total 80 px).

I have read below question, but it does not appear to be about the reason for this problem.

Community
  • 1
  • 1
  • 1
    don't rely on inline-block to do this; font plays a big role here to define the space ... try a very small font-size vs a very big one to see the difference .. use flexbox or float – Temani Afif Dec 27 '18 at 22:08
  • @TemaniAfif The value of font-size breaks the element. However, this time the font size is `16px` for both Firefox and Chrome( I wrote to Question1 ). In addition to the font size, is there anything that affects line breaks of elements? –  Dec 27 '18 at 22:46
  • the font it self, not only the font-size ... browser don't use the same default font-size. check this : https://jsfiddle.net/wxmyzL5q/ see how the gap is different between fonts – Temani Afif Dec 27 '18 at 22:48
  • @TemaniAfif Indeed, by changing the font, the blank font size seems to be changing. Therefore, if you set the `font-size` property so that it does not consider the blank font size, it solves ( https://jsfiddle.net/6whdosy3/ ).It is a very interesting move. –  Dec 28 '18 at 01:08
  • @TemaniAfif Is the number `22px` of the `calc` function set in the `width` property also calculated considering `font-size` ? The calculated value `22px` seems to be mysterious at first glance( I wrote to Question2 ). –  Dec 28 '18 at 01:09

0 Answers0