Vertical alignment of empty inline-block elements

Question

Consider the following html/css:

<style>
span
{
  display:inline-block;
  width:5em;
  height:5em;
  padding:1em;
}
</style>

a
<span style="background-color:blue;">b</span>
<span style="background-color:green;"></span>
<span style="background-color:red;">c</span>
d

The blue and red boxes, plus the text both inside and surrounding the boxes lines up horizontally. The empty green box does not; it appears above the other two boxes. If I add some text to the green box, this behavior stops and everything lines up the way I want it to.

This happens consistently in IE8 (standards mode), FireFox 3.0 and Chrome, so I'm assuming there is some property of empty inline-block elements that I don't understand.

I can make the boxes line up by specifying a vertical-align property, but then the four text values are no longer aligned. Any thoughts? I'm stumped on this one.

Answer 1

Try adding &nbsp*; inside of the green colored span. (remove the "*" from the character, that's the only way I could post it without it becoming a space.

Answer 2

a
<span style="background-color:blue;">b</span>
<span style="background-color:green;">&nbsp;</span>
<span style="background-color:red;">c</span>
d

Answer 3

Give the span top alignment then negative margin equal to your padding, and you don't need the non-breaking space hack.

span
{
    display:inline-block;
    width:5em;
    height:5em;
    padding:1em;
    vertical-align:top;
    margin-top: -1em;
}



a
    <span style="background-color:blue;">b</span>
    <span style="background-color:green;"></span>
    <span style="background-color:red;">c</span>
d

Answer 4

Thanks for your help, Luke!

Note that you can get a slightly better alignment with vertical-align:text-top, but that explains exactly why this issue was happening in the first place.