Cómo calcular la altura de un elemento en línea

Tengo un elemento span con el siguiente CSS:

 span.test { font-size: 20px; line-height: 1; } 

¿Por qué la altura calculada del tramo parece ser de 22 px? ¿De dónde vienen estos 2 píxeles extra?

enter image description here

¿Es posible hacerlo alto 20px sin usar inline-block ?

Aquí está el jsbin simple que solía probar: http://jsbin.com/tigevecemoco/1/edit

La especificación CSS 2.1 dice:

10.6.1 Elementos en línea, no reemplazados

La propiedad ‘altura’ no se aplica. La altura del área de contenido debe basarse en la fuente, pero esta especificación no especifica cómo.

Da la casualidad que la altura, a diferencia de la altura de la línea, de un elemento en línea no reemplazado tiene muy poco efecto en cualquier otra cosa, por lo que los navegadores pueden informar el número que quieran aquí.

Sin embargo, una pequeña ingeniería inversa puede ser instructiva.

Si miramos las métricas de fuente para Times New Roman, vemos tamaño EM de 2048, WinAscent de 1825 y WinDescent de 443. Sume el ascenso y descenso, divida por el tamaño EM, multiplique por el tamaño de fuente (20px) y la redonda al entero y obtenemos 22px.

Tomando Arial como otra fuente, tenemos un tamaño EM de 2048, WinAscent de 1854 y WinDescent de 434. Haga el cálculo de nuevo y nuevamente obtenemos 22px.

¿Qué pasa con una fuente diferente? Tahoma tiene un tamaño EM de 2048, WinAscent de 2049 y WinDescent de 423. Haga el cálculo de nuevo y esta vez obtenemos 24px. Y listo, si prueba su JsBin con la fuente Tahoma, Firefox muestra una altura de 24px.

Las métricas de fonts anteriores se obtuvieron al cargar las fonts en Type Light 3.2 .

No es concluyente, pero es una sugerencia razonable de cómo funciona todo.

¿Es posible hacerlo alto 20px sin usar bloque en línea?

Suponiendo que lo anterior es correcto, debe poder lograrlo utilizando una fuente personalizada y modificando las métricas de fuente de esa fuente para adaptarlas. Sin embargo, no me gustaría predecir los efectos secundarios de hacer eso.

No pude encontrar una respuesta a por qué se aplica. Encontré muchos foros con la misma pregunta …

Pero, como respuesta a su solicitud:

¿Es posible hacerlo alto 20px sin usar bloque en línea?

Logré hacerlo solo flotando el elemento. Parece perder lo que sea que lo estaba rellenando … Entonces, establecer la line-height la line-height a 20px específico lo hace funcionar.

 span.test { font-size: 20px; line-height: 20px; float: left; } 
 A 

intente usar

line-hieght: 1 ‘ se hereda del padre. prueba la propia altura de línea.

MDN altura de línea

por qué la altura de la línea del tramo es inútil

Espero que esto ayude.

Utilicé JS Bin http://jsbin.com/siqabekoloja/1/edit para resolver su problema. Logré que sea coherente en IE, Chrome y Firefox. Creo que el problema es que necesita el elemento para bloquear no un elemento en línea.

Espero que esto ayude. Si quieres que estén uno al lado del otro simplemente flotarlos hacia la izquierda o hacia la derecha.