Altura de línea y elementos en línea: una inmersión más profunda

Comprender el comportamiento de la altura de línea en elementos en línea puede resultar desconcertante. A pesar de una investigación exhaustiva, algunos aspectos clave siguen sin estar claros. Esta guía profundiza en el tema para responder las siguientes preguntas:

1. Inconsistencia entre el tamaño de fuente y la altura medida:

Un elemento en línea con un tamaño de fuente de 15 px muestra una altura de 18 px en las herramientas de desarrollo del navegador. Esto ocurre porque:

• Altura del cuadro en línea: La propiedad line-height determina la altura del cuadro en línea, que encierra todos los glifos y su medio interlineado en cada lado. En este caso, la altura del cuadro es 15 píxeles.
• Altura del área de contenido: Las herramientas de desarrollo informan la altura del área de contenido, que generalmente excede la altura de la línea debido a variaciones en el tamaño de los glifos. dentro de una fuente.

2. El color de fondo no coincide con la altura de la línea:

El color de fondo del elemento en línea no se alinea con la altura de la línea porque:

• Altura del cuadro de línea: Además de los cuadros en línea, también hay cuadros de línea. La altura de un cuadro de línea está determinada por la altura de la línea e incluye solo aquellos cuadros en línea que comparten la misma altura de línea y alineación vertical. En este ejemplo, la altura del cuadro de línea también es 15 px.
• Altura del área de contenido: El color de fondo se aplica al área de contenido, que corresponde a la altura del glifo más alto en el fuente y tamaño. Este valor puede variar según las características de la fuente y no está directamente relacionado con la altura de la línea.

Nota: La especificación CSS no define explícitamente el algoritmo para calcular el área de contenido altura, dejándolo a la interpretación de los agentes de usuario.