inline-block element with no text renders differently

Question

<div style="background-color:red">
  <div style="display:inline-block;background-color:green;height:20px;width:20px;"></div>
</div>
<div style="background-color:yellow">
  <div style="display:inline-block;background-color:green;height:20px;width:20px;">hi</div>
</div>

When rendered in FF or Chrome the height of the red div is 26px, whereas the height of the yellow div is 20px. How can I make the red div render the same as the yellow div, but without it containing any text?

Answer 1

just a thought:

as long as there's no text in the div, it's treated like a inline-image (or something else), and so it's vertical-align is set to 'baseline'(or text-bottom or whatever) instead of 'bottom'.

the solution:

to correct that, set vertical-align: bottom; on your inner divs. there's absolutely no need to put a space or invisible element into it, like others mentioned (but that would be an (ugly) solution, too)

Answer 2

If you want to have a specific height, use

min-height: 1em;

Using a space of some sort is a different height in some circumstances.

Answer 3

How about putting a zero-width space (​) in the "empty" node?

Answer 4

It's lame, but you could add a   to the empty div.

inline-block is a funny display type and without content because other properties like font-size and line-height can actually growing the element taller than 20px.