CSS: ¿Por qué reducir el tamaño de fuente de un elemento en línea adyacente aumenta la ventaja general?

Question

Tengo un elemento que contiene dos etiquetas de tramo que contienen texto. El elemento contenedor establece un tamaño de fuente, luego el tamaño de fuente en la segunda etiqueta span se establece en un tamaño más bajo. Cuando el segundo tramo se reduce en tamaño de fuente, se aumenta el espacio entre la línea y el siguiente elemento de bloque. Esto ocurre tanto en WebKit como en Gecko.

El elemento p recipiente tiene { margin-bottom: 0; padding-bottom: 10px; } y su siguiente hermano tiene { margin-top: -5px; }

La imagen siguiente ilustra la situación y contiene una instantánea de la parte pertinente de la estructura del documento en FireBug.

¿Por qué es el espacio debajo de la etiqueta p creciente después de reducir el tamaño de fuente de la segunda etiqueta span?

Answer 1

Supongo que tiene una altura de línea (relativamente) grande heredada por ese lapso decimal (quizás 32px?), Y cuando reduce el tamaño de fuente a 18px, obtiene una situación donde la línea de base del los glifos decimales coinciden con los glifos no-nominales, pero la línea aún debe ocupar toda la altura de línea especificada. Por lo tanto, se agrega espacio adicional por debajo de la línea de base.

añadir una regla de línea de altura y apuesto a esto desaparece:

.box .value > .decimal { line-height: 18px; }