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

DEMO

The problem is that there are hidden spaces (a line break and a few tabs counts as a space, just to be clear) between tags. Minimize the HTML or comment the spaces out and everything will work correct:

body {
  font-family: Arial;
}

.my-class {
  display: inline-block;
  margin-left: -4px;
  border: 1px solid #cccccc;
  padding: 20px;
}

  
  


  

    HelloStackOverflow