Why does inline-block cause this div to have height?
jsFiddle Demo
I cannot seem to figure out why using display:inline-block would cause this <div> element to somehow gain height when its containing element was hidden. This does not happen with display:block.
html:
<div style="display:inline-block;"><input type="hidden" /></div>
<div>Gap above created by inline-block</div>
<div style="display:block;"><input type="hidden" /></div>
<div>No gap above if using block</div>
Why does display:inline-block cause the gap depicted here?
Solution 1:
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.
jsFiddle
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.
Solution 2:
Ok as already mentioned very briefly in the comments:
inline-block
This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
inline
This value causes an element to generate one or more inline boxes.
The most important part for this topic would be that the element itself get's formatted not just the content. Every inline-block element will be seen as atomic inline box and thus take up space.
Source: http://www.w3.org/TR/CSS2/visuren.html#inline-boxes
Solution 3:
Apparently what display:inline-block does for default is set a visual height based on his parent line-height. The solution make a parent wrapper with this properties:
#container {
line-height:0;
}
The demo http://jsfiddle.net/FE3Gy/33/ . Here you can check an example with different font-size values.
Acorrding to the W3 is:
The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
About inline box here
The width of a line box is determined by a containing block and the presence of floats. The height of a line box is determined by the rules given in the section on line height calculations.
So you can check more about line-height here :
http://www.w3.org/TR/CSS2/visudet.html#line-height
Solution 4:
You'll get an actual line whether you have a hidden input or a space or whatever - your browser thinks it's some inline content, therefore it gets a line.
http://jsfiddle.net/FE3Gy/7/
<div style="display:inline-block;"> </div><div>Gap above created by inline-block</div>
<div style="display:block;"><input type="hidden" /></div>
<div>No gap above if using block</div>
Even if you have absolutely nothing, you'll get a line. display: inline-block turns it into inline-content.
http://jsfiddle.net/FE3Gy/15/
Solution 5:
Layne and Nate have the right answer, but I wanted to bring to your attention this clause from the CSS 2.1 spec, section 9.4.2.
Line boxes are created as needed to hold inline-level content within an inline formatting context. 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.
Spans (inline elements) that have no in-flow content (<input type="hidden" /> is display:none so cannot be treated as in-flow content) meet those criteria so their containing line-boxes are treated as 0 height or non-existing. inline-block elements are explicitly excluded from meeting those criteria so the inline-block element creates a line box that must be line-height tall.
Note that you can see this in action in another way by adding a border to a span element so that it doesn't comply with the above criteria. See http://jsfiddle.net/FE3Gy/36/