Considere el siguiente 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

Los cuadros azul y rojo, más el texto dentro y alrededor de los cuadros se alinean horizontalmente. El cuadro verde vacío no lo hace; aparece encima de las otras dos cajas. Si agrego texto al cuadro verde, este comportamiento se detiene y todo se alinea de la manera que quiero.

Esto ocurre constantemente en IE8 (modo estándar), FireFox 3.0 y Chrome, así que asumo que hay alguna propiedad de elementos de bloque en línea vacíos que no entiendo.

Puedo hacer que los cuadros se alineen especificando una propiedad de alineación vertical, pero luego los cuatro valores de texto ya no están alineados. ¿Alguna idea? Estoy perplejo en este caso.