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 followin

Answer 1

PROBLEM:

this happens because the display is set to inline-block.

inline-block is:

The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would)

»» see more about display property here: DISPLAY INFO

SOLUTION(S):

• Remove the spaces
• Negative margin
• Skip the closing tag
• Set the font size to zero
• Just float them instead
• Just use flexbox instead

For more details on each solution check Fighting the Space Between Inline Block Elements

my preferred solutions from above is

Set the font size to zero

therefore is a snippet with your code and my preferred solution:

div {
 font-size:0;
}

.my-class {
  display: inline-block;
  border: 1px solid #cccccc;
  padding: 20px;
  font:normal 12px Arial;
}

  Hello
  Stack
  Overflow

Plus, here is a snippet with your EXACT CODE only changing the font-family from body to the elements that have display:inline-block, and achieving the same output as my FIRST SNIPPET

.my-class {
  display: inline-block;
  margin-left: -4px;  /* Remove the space between inline elements */
  border: 1px solid #cccccc;
  padding: 20px;
  font-family:Arial;
}

  Hello
  Stack
  Overflow

EDIT:

OP's question:

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

in web typography there are:

• Sans-serif

  Fonts that do not have decorative markings, or serifs, on their letters. These fonts are often considered easier to read on screens.

• Serif

  Fonts that have decorative markings, or serifs, present on their characters.

• Monospace

  Fonts in which all characters are equally wide.

• Cursive

  Fonts that resemble cursive writing. These fonts may have a decorative appearance, but they can be difficult to read at small sizes, so they are generally used sparingly.

• Fantasy

  Fonts that may contain symbols or other decorative properties, but still represent the specified character.

Since Arial is a sans-serif font, therefore a non-fixed width font ( like monospace ), when applied to body with child elements displaying inline-block(without fix for the gaps) it will create space between the child elements.

Although if you apply the font-family to the child elements, like I DID in my 2ND SNIPPET it doesn't happen anymore.

---

one comment of an article:

The gap between inline elements is, as you suggest, a space character. The width depends on the font (family, variant, etc.) and approximates to .25em

you can check it here

the full article is below

ARTICLE