Strange gap between two buttons [duplicate]

Question

I'm experiencing a strange behaviour with the HTML button tag. It seems that when I place two buttons side by side, they have a 4px gap between them appearing out of nowhere.

Here is a fiddle which shows the issue.

As you can see from the image below, FireBug shows that the gap is neither a margin or a padding (since a padding would be shown in purple).

As a note: I'm using the latest version of Firefox on Windows 8.1 and I tried also with the CSS Reset from Eric Mayer, but the gap is still there.

It's not a really important problem, but it would be nice to know if it's normal or not and what causes it.

Answer 1

The problem is that in inline-block elements the whitespace in HTML becomes visual space on screen. Some solutions to fix it:

1. Use font-size: 0 to parent container(you have to define font-size to child elements):

.buttons {
  width: 304px;
  margin: 0 auto;
  z-index: 9999;
  margin-top: 40px;
  font-size: 0;
}
button {
  background-color: transparent;
  border: 1px solid dimgray;
  width: 150px;
  height: 40px;
  cursor: pointer;
}

<div class="buttons">
  <button>Button1</button>
  <button>Button2</button>
</div>

2. Another one is to use negative margin-left: -4px

.buttons {
  width: 304px;
  margin: 0 auto;
  z-index: 9999;
  margin-top: 40px;
}
button {
  background-color: transparent;
  border: 1px solid dimgray;
  width: 150px;
  height: 40px;
  cursor: pointer;
  margin-left: -4px;
}

<div class="buttons">
  <button>Button1</button>
  <button>Button2</button>
</div>

3. Last but i don't like it at all is to use html comments as spacers between gaps:

.buttons {
  width: 304px;
  margin: 0 auto;
  z-index: 9999;
  margin-top: 40px;
}
button {
  background-color: transparent;
  border: 1px solid dimgray;
  width: 150px;
  height: 40px;
  cursor: pointer;
}

<div class="buttons">
  <button>Button1</button><!--
 --><button>Button2</button>
</div>

All above will work. Good luck :)