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

display:inline-block has different behavior than display:block. While block create a box element, inline block creates a box but it add some surrounding content as if it were a single inline element. This surrounding content could be the source of your issue. I think unless you have a very specific reason to use inline-block you should use display:block.