Where is the gap between these Bootstrap buttons coming from?

Question

These buttons have a gap between them. I'm unable to recreate that. Using the inspector tool I can't figure out where that gap is coming from. Any ideas?

Answer 1

It's coming from the font-size of the container. This is happening because the buttons themselves are set to display as inline-block, which means they're inline with the text and treated very similarly. As there's a new line between each element in the markup, a space appears (as this is how the HTML specification tells browsers how to handle new lines).

We can demonstrate this ourselves with the same display property:

button {
  display: inline-block;
}

<button>Foo</button>
<button>Bar</button>

If we increase the font-size of the body (the container for these buttons in this example), the size of the space will increase:

body {
  font-size: 72px;
}

button {
  display: inline-block;
  font-size: 14px;
  vertical-align: top;
}

<button>Foo</button>
<button>Bar</button>

We can remove the gap completely by giving the container a font-size of 0:

body {
  font-size: 0;
}

button {
  display: inline-block;
  font-size: 14px;
  vertical-align: top;
}

<button>Foo</button>
<button>Bar</button>

See also: How to remove the space between inline-block elements?