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

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