css: inline-block element with no text renders differently

Question

example here: http://demo.cybercsi.com/tests/InlineBlock.html

code:

<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

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

Answer 2

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.

Answer 3

just a thought:

as long as tehre'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)