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

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