Diferencia entre la línea de base de los bloques en línea vacíos y no vacíos

Question

div { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #aef; 
 
    vertical-align: baseline; 
 
}

base <div>×</div> <div></div> line

El bloque de línea vacía se alinea de manera diferente de la que contiene texto. Esto se puede solucionar especificando un valor diferente de vertical-align, pero me pregunto por qué está sucediendo esto. ¿Puedes señalar una parte relevante de la especificación de CSS?

Answer 1

De CSS2: Line height calculations

vertical-align: baseline - alinear la línea de base de la caja con la línea de base de la caja padre. Si la caja no tiene una línea de base, alinee en la parte inferior de la caja con la línea base de los padres.