inline-block element with no text renders differently
css, html
Solution
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)
Problem
``` <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?