elemento inline-block sin texto hace diferente

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>

Cuando generado en FF o Chrome la altura de la div rojo es 26px, mientras que la altura de la div amarillo es 20 píxeles. ¿Cómo puedo hacer que el div rojo represente lo mismo que el div amarillo, pero sin que contenga ningún texto?

Answer 1

sólo un pensamiento:

, siempre y cuando no hay texto en el div, es tratado como un inline-imagen (o algo más), y para que quede vertical-align se establece en 'línea de base' (o fondo de texto o lo que sea) en lugar de 'abajo'.

la solución:

para corregir eso, establece vertical-align: bottom; en su divs interiores. no hay absolutamente ninguna necesidad de poner un espacio o elemento invisible en ella, al igual que otros mencionados (pero eso sería una solución (feo), también)

Answer 2

¿Qué le parece poner un espacio de ancho cero (​) en el nodo "vacío"?

Answer 3

Es cojo, pero podría agregar   al div vacío.

inline-block es un tipo de pantalla divertido y sin contenido porque otras propiedades como font-size y line-height pueden realmente hacer crecer el elemento más alto que 20px.

Answer 4

Si usted quiere tener una altura específica, utilice

min-height: 1em; 

Usar un espacio de algún tipo es una altura diferente en algunas circunstancias.