alineación vertical de los elementos en línea-bloque vacío

Question

Consideremos 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 

Las cajas azul y rojo, más el texto dentro y que rodea a las líneas de cajas horizontalmente. El cuadro verde vacío no; aparece encima de los otros dos cuadros. Si agrego algo de texto al recuadro verde, este comportamiento se detiene y todo se alinea como yo quiero.

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

Puedo alinear las cajas 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.

Answer 1

Intente agregar   dentro del intervalo de color verde.

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

Proporcione la alineación máxima del tramo y luego un margen negativo igual a su relleno, y no necesita el hack de espacio sin interrupciones.

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