html - 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>

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)