When using Bootstrap "btn"-styled inline-block elements, I'm getting an inconsistent (sometimes 3px, sometimes 4px) gap between them (viewing in Chrome).
I'm aware that inline-block elements will have a gap whenever there's whitespace between them, but I've never encountered gaps of varying sizes before. It makes it impossible to apply traditional fixes like setting a -4px negative margin.
Why is this happening?
HTML:
<div class="h-wrap">
<a class="btn btn-default">Some</a>
<a class="btn btn-default">Some</a>
<a class="btn btn-default">Some</a>
<a class="btn btn-default">Some</a>
<a class="btn btn-default">Some</a>
<a class="btn btn-default">Some</a>
</div>
<div class="h-wrap">
<button class="btn btn-default">Some</button>
<button class="btn btn-default">Some</button>
<button class="btn btn-default">Some</button>
<button class="btn btn-default">Some</button>
<button class="btn btn-default">Some</button>
<button class="btn btn-default">Some</button>
</div>
CSS:
.h-wrap > * {
display:inline-block;
}
EXAMPLES:
http://jsfiddle.net/0tophozu/2/
http://jsfiddle.net/0tophozu/5/
NOTE: I'm not looking for alternative white space solutions- I just want to understand why the gap is inconsistent.
