line-height sin unidades

Question

vi personas que utilizan altura de la línea, sin especificar una unidad, como esto: line-height: 1.5;

¿Qué representa el número? Supongo que es una proporción, ¿es como em?

Answer 1

line-height@ Mozilla Developer Network tiene una muy buena explicación (y ejemplos) que es más fácil de entender en comparación con el line-heightCSS specification.

line-height puede tener el valor especificado en una de las siguientes maneras

line-height: normal | <number> | <length> | <percentage> 

En su caso, usted está usando un <number> que se describe como:

El valor usado es este sin unidades <number> multiplicado por el tamaño de fuente del elemento. El valor calculado es el mismo que el <number> especificado. En la mayoría de los casos, esta es la forma preferida de establecer la altura de línea sin resultados inesperados en caso de herencia.

Answer 2

Véase el respective spec @W3C:

El valor usado de la propiedad es este número multiplicado por el tamaño de la fuente del elemento. Los valores negativos son ilegales. El valor calculado es el mismo que el valor especificado.

Así como usted adivinado es una relación y se relaciona con la corriente font-size.

Answer 3

line-height: X; básicamente traduce en line-height: (X*100)%;

line-height: 1; es la misma que line-height: 100%;

mismo modo,

line-height: 1.5; es el mismo que line-height: 150%;

---

Dónde line-height: X%; significa X% de la altura de línea de la fuente configurada actualmente y tamaño para el elemento.

Por ejemplo, si la línea de altura para un elemento como por la fuente conjunto actual y el tamaño es 24px, line-height: 150% haría que su línea de altura 36px. Y así sucesivamente ..

Answer 4

Sí, es una relación: 1.5 significa 1.5 veces el tamaño de fuente del elemento. Por lo tanto, significa lo mismo que 1.5em o 150%, pero con una excepción importante: en la herencia, cuando se usa un número puro, el número se hereda, no el valor calculado.

Si tiene un elemento con el tamaño de fuente 24pt, line-height: 1.5 establece la altura de la línea en 36pt. Pero si el elemento tiene un elemento secundario, es decir, un elemento interno, con un tamaño de fuente de 10 pt y sin ninguna altura de línea establecida, el elemento secundario hereda el valor line-height de 1.5, lo que significa 15pt para ese elemento.Si, por otro lado, la altura de la línea se estableció en 1.5em o 150%, el niño heredará el valor calculado de 36pt, lo que crea un espaciado de línea grotesco.

Técnicamente, esto está oculto bajo un formulation que dice. para un número puro utilizado como valor line-height: "El valor calculado es el mismo que el valor especificado." Entonces, nominalmente, el niño hereda el valor "calculado" de 1.5, que luego se interpretará en el contexto del niño (1.5 veces es tamaño de fuente).

Answer 5

También puede usar rem para utilizar el tamaño de raíz em en lugar del tamaño de fuente actual.

lo que estos son tanto altura de la línea de dos veces el tamaño de fuente actual

font-size: 2em; 
font-size: 2; 

Pero esta es una altura de línea de dos veces el tamaño de la fuente RAÍZ

font-size: 2rem;