¿Por qué la altura de línea sin unidad se comporta de manera diferente al porcentaje o em en este ejemplo?

Basado en las pistas en las respuestas propuestas, creo que el comportamiento de renderizado visto en estos ejemplos es contraintuitivo, pero correcto, y ordenado por la interacción de varias reglas en la especificación, y el modelo general de caja CSS .

1. CSS calcula la L inicial necesaria para una caja por la fórmula line-height = L + AD, donde AD es " la distancia desde la parte superior hasta el inferior " de la fuente. Entonces " la mitad de la delantera se añade por encima de A y el otro la mitad por debajo de D." texto que tiene font-size:16px y line-height:24px tendrá 4px de delante por encima y por debajo. Texto que font-size:8px y line-height:24px tendrán 8px de liderazgo arriba y abajo.

2. Por defecto, sin embargo, "el agente de usuario debe alinear los glifos ... por su pertinente líneas de base.". Esto empieza a explicar lo que está pasando aquí. Cuando line-height es especificado por porcentaje o em, un valor calculado es heredado por el niño (aquí, el intervalo smaller). Es decir, el intervalo smaller obtiene el mismo line-height que el bloque padre. Pero debido a la L + Fórmula de ANUNCIO, el texto de ese lapso tiene más liderazgo en la parte superior y inferior, y por lo tanto la línea de base se encuentra más alto en su caja. Navegador empuja hacia abajo el tramo smaller verticalmente para que coincida con las líneas de base.

3. Pero entonces el navegador tiene un nuevo problema: cómo lidiar con la línea espacio en el bloque de cierre, que ha sido interrumpido por este línea de base-proceso de ajuste. La especificación resuelve esto también: line-height de un elemento a nivel de bloque " especifica el mínimo altura de cajas de línea dentro de la elemento " . Es decir, CSS no hace ninguna promesa de que obtendrá su exacta line-height, solo que obtendrás al menos esa cantidad. Así que el navegador empuja las líneas separadas en el bloque de cierre para que el la caja del niño realineada encajará.

La razón por la que esto es contradictorio es que es lo contrario de cómo funcionan la mayoría de los procesadores de texto y programas de diseño de páginas. En estos programas, un tramo más pequeño de texto dentro de un párrafo está alineado por su línea de base (como CSS) pero la altura de la línea se impone como una distancia entre líneas de base, no como un cuadro que rodea el texto más pequeño. Pero eso no es un error: CSS está diseñado alrededor de un modelo de caja . Así que al final, podríamos decir que este comportamiento de espaciado es una consecuencia de ese modelo.

Eso aún nos deja explicar el comportamiento en el ejemplo con la altura de línea sin unidad:

1. En primer lugar, tenga en cuenta que cuando no se especifica line-height, el navegador aplicará una altura de línea sin unidad por defecto. Esto es requerido por el spec : el valor inicial de line-height es normal, que se define como tienen " el mismo significado que ", y la especificación recomienda un valor "entre 1.0 y 1.2". Y eso es consistente con lo que vemos en los ejemplos anteriores, donde los párrafos con line-height: 1.5 tienen el mismo comportamiento que los párrafos sin ajuste de altura de línea (es decir, están implícitamente llegar line-height: normal)

2. Como otros han señalado, cuando el párrafo line-height: 1.5, el calculado línea-altura del párrafo es no heredado por el intervalo smaller. Más bien, el intervalo smaller calcula su propia altura de línea en función de su propio tamaño de fuente. Cuando el párrafo tiene line-height: 1.5; font-size: 14px, entonces su la altura de línea calculada es 14px * 1.5 = 21px. Y si el smaller span solo tiene la propiedad font-size: 50%, entonces su tamaño de fuente es 14px * 50% = 7px, y su altura de línea es 7px * 1.5 = 10.5 px (que generalmente se redondeará a un píxel completo). Pero en general, el smaller la caja es la mitad del tamaño del entorno texto.

3. Como antes, el navegador alineará verticalmente el intervalo smaller para la línea de base adyacente. Pero esta vez, porque la caja alrededor smaller es más corto que el texto circundante, este realineamiento no tiene ningún efecto secundario en el bloque de cierre. Ya se ajusta, por lo que no hay necesidad de extender las líneas del párrafo padre, como había antes.

Ambos casos representan una implementación consistente del spec. Esas son buenas noticias, porque significa que podemos predecir el comportamiento del espaciado entre líneas.

Eso nos lleva de vuelta a la razón original de esta pregunta. Aunque ahora entiendo que el modelo de caja CSS requiere este comportamiento, como tipógrafo practicante, este rara vez es el comportamiento que quiero. Lo que quiero es que las líneas dentro de un párrafo tengan un espaciado de línea constante y exacto, incluso si algunos tramos de texto dentro de ese párrafo son más pequeños.

Desafortunadamente, parece que no hay manera de hacer cumplir directamente la línea exacta espaciado en CSS como se puede en un procesador de textos o programa de diseño de página. Una vez más, esto se debe al modelo de caja CSS: no utiliza un modelo de espaciado de línea base a línea base, y line-height se especifica como una medida mínima, no máxima.

Pero al menos podemos decir que los valores de altura de línea sin unidad producen la mejor aproximación del espaciado de línea exacto en CSS. Los tipógrafos quisquillosos como yo deberían sentirse cómodos usándolos, porque los valores unitarios están respaldados por el spec , y producen resultados consistentes en todos los navegadores. No son un truco, ni están en desuso.

La advertencia es que todavía son solo una aproximación. Los valores de altura de línea sin unidad no cambian el modelo de caja CSS subyacente, ni las reglas de posicionamiento de caja CSS. Por lo tanto, es posible que en algunos casos extremos, no tengan el resultado deseado. Pero la vigilancia eterna es el precio de una buena tipografía. Ten cuidado ahí fuera.