Why font-family sporadically adds 1px gap between buttons?

Question

Please read the question carefully. It's not the same as the one about How to remove the space between inline-block elements.

Consider the following HTML:

body {
  /* font-family: Arial; */
}

.my-class {
  display: inline-block;
  margin: 0 0 0 -4px;
  background-color: transparent;
  border: 1px solid #ccc;
  padding: 20px;
}

<div>
  <button class="my-class">Hello</button>
  <button class="my-class">Stack</button>
  <button class="my-class">Overflow</button>
</div>

Which produces:

But, if I add:

body {
  font-family: Arial;
}

it results in a 1px space between the second and third buttons:

The question is: Why adding font-family to the body affects the space between the buttons?

Answer 1

It happens because each font has different width, even for the space character. You already know about the whitespace issues with inline-blocks. So, when you set Arial, those whitespaces change their width slightly from the browser's default font (or any other font with different width), which is Times New Roman in my case.

See how drastic the change is when you set the monospace font.

Now, why it happens between the 2nd and the 3rd box and not the 1st and the 2nd one? I'm pretty sure it comes down to rounding pixel values based on the width of the words entered, seems like there is a pseudo sub-pixel rendering present in the background, yet the decimal values get rounded in the final render process. See what happens if you use Arial and print Hell Stack Overflow instead of Hello Stack Overflow - the gaps look the same. So, it's just an undesired coincidence.

Another point that proves this is a rounding issue is the change in the gaps across various page zoom levels. It's fairly common to get these pixel mismatches in the layout when dealing with decimals in HTML. Zooming adds another dividing/multiplication stage, which changes the core values even further, resulting in completely unpredictable behaviour in the final layout.

Answer 2

It's because you're displaying the buttons as inline-block elements and when you have inline elements whitespace is significant and is rendered in the same way that spaces between words is rendered.

i.e inline-block makes whitespace significant, so spaces in the source between inline-block elements will be rendered.

For example: You could center the inline-block elements just by adding text-align: center; the same way is used to center the text in its parent block element. - DEMO

Why adding font-family to the body affects the space between the buttons?

Different fonts can have different spacing between words, If you compare font-family: monospace; with font-family: sans-serif; then you will see the monospace fonts have more space between words than sans-serif fonts and the inline-block elements is also rendered in the same way and have the spacing between elements.

• Monospace DEMO

• Sans-serif DEMO

The best way to remove the space between inline-block elements is adding the font-size: 0; to the parent element.

DEMO

div {
  font-size: 0;
}
.my-class {
  display: inline-block;
  border: 1px solid #cccccc;
  padding: 20px;
  font-size: 16px;
}

<div>
    <button class="my-class">Hello</button>
    <button class="my-class">Stack</button>
    <button class="my-class">Overflow</button>
</div>