Why does inline-block cause this div to have height?

Question

jsFiddle Demo

I cannot seem to figure out why using display:inline-block would cause this

element to

Answer 1

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 ( 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/