One thing that happens when you create a display:inline-block is that the line-height calculations will change:
In an inline formatting context, boxes are laid out horizontally, one
after the other, beginning at the top of a containing block.
Horizontal margins, borders, and padding are respected between these
boxes. The boxes may be aligned vertically in different ways: their
bottoms or tops may be aligned, or the baselines of text within them
may be aligned.
source: http://www.w3.org/TR/CSS2/visuren.html#block-formatting
The height of each inline-level box in the line box is calculated. For
replaced elements, inline-block elements, and inline-table elements,
this is the height of their margin box; for inline boxes, this is
their ‘line-height’.
source: http://www.w3.org/TR/CSS2/visudet.html#line-height
CSS assumes that every font has font metrics that specify a
characteristic height above the baseline and a depth below it. In this
section we use A to mean that height (for a given font at a given
size) and D the depth. We also define AD = A + D, the distance from
the top to the bottom.
source: http://www.w3.org/TR/CSS2/visudet.html#inline-box-height
So the line height will be defined on their font type. However when the inline-block is empty it will have its basic line-height. It however still tries to generate his line-height with a font.
To quick fix this you can use a wrapper which defines exclusive that there is no font, so no line-height which leads into no height:
.wrapper
{
font-size: 0;
}
Where you can reset this property in your inline-block:
.wrapper div
{
font-size: medium;
}
Where the default value of font-size is medium.
This way you can still use content in the inline-block without there being a gap.
Update
This update is because of Kevin Wheelers comment
… I’m confused, it still never says what the height of an empty inline-block element is. …
I want to note that I have not found any official documentation about this, though through testing I have found common patterns.
Short version:
Just think of it as inline-block expects content and reserves a minimum line space based of the known line-height.
Some more insight:
JsFiddle as a more clear example
As you can see the gab of the inline-block height is based on a line-height, which we have determed in the first post.
Now where does this line-height come from?
It is inherited from the first that determs the line-height: the <body> element.
You can test this my changing font-size, font-family or the line-height of the <body> element.
So it reserves a line-box for it’s content. Which is strange that it is visible at all, as you can see according to the W3 specs of inline-formatting:
Line boxes that contain no text, no preserved white space, no inline elements with non-zero margins, padding, or borders, and no other in-flow content (such as images, inline blocks or inline tables), and do not end with a preserved newline must be treated as zero-height line boxes for the purposes of determining the positions of any elements inside of them, and must be treated as not existing for any other purpose.
It does this for every other element inside of the inline-block, but it always seems to reserve a minimum line space.