¿Cuál es la diferencia entre la altura de línea: 1.5 y la altura de línea: 150% en css?

Question

¿Alguien sabe al respecto?

Answer 1

Versión corta: line-height: 150% es estática, line-height: 1.5 es dinámica. El efecto es más evidente en elementos heredados. Un ejemplo:

HTML

<div style="font-size: 12px"> 
    <span style="font-size: 24px">test</span> 
</div> 

Este CSS

div { line-height: 150%; } /* Computed line-height: 18px (150% * 12px) */ 
span { }     /* Computed line-height: 18px (inherited directly) */ 

En oposición a esto:

div { line-height: 1.5 } /* Computed line-height: 18px (1.5 * 12px) */ 
span { }     /* Computed line-height: 36px (1.5 * 24px) */ 

Usted puede leer más en el CSS2 specs page

Answer 2

Ambos son equivalentes.

line-height: 1.5 (sin unidades) mutiplicarán el tamaño de fuente del elemento por 1.5 para calcular la altura de la línea.

line-height: 150% tendrá 150% de computado tamaño la fuente del elemento para calcular la altura de la línea, que es equivalente a multiplicar por 1.5.

Las tres reglas en el ejemplo a continuación tienen la misma altura de la línea resultante:

div { line-height: 1.2; font-size: 10pt }  /* number */ 
div { line-height: 1.2em; font-size: 10pt } /* length */ 
div { line-height: 120%; font-size: 10pt } /* percentage */ 

Ahora vamos a echar un vistazo a the question you asked.

que reproduce los dos casos:

1. http://gregory.pakosz.fr/stackoverflow/2040694-number.html
2. http://gregory.pakosz.fr/stackoverflow/2040694-percentage.html

En 1), se establece en 1.5 multiplicado tamaño de la fuente del div de los padres line-height del div real. Esta propiedad se hereda y vuelve a calcular para el hijo span porque ha cambiado el tamaño real de la fuente.

En 2), el div line-height del elemento primario se establece en 150% del tamaño de fuente calculado del div. A continuación, el tamaño de fuente calculado de span se hereda de div, por lo tanto, 150% de este tamaño de fuente calculado heredado conduce al mismo valor.

Como @K primer resumir, el llevar es probable: line-height: 150% es estática, es dinámica line-height: 1.5

Referencias:

• 10.8 Line height calculations: the 'line-height' and 'vertical-align' properties (CSS2)

Answer 3

line-height: normal | 

<number>| 

<length>| 

<percentage> 

De line-height

<number> 

El valor usado es este sin unidades multiplicado por el tamaño de fuente del elemento. El valor calculado es el mismo que el 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.

<percentage> 

En relación con el tamaño de fuente del elemento en sí. El valor calculado es este porcentaje multiplicado por el tamaño de letra calculado del elemento.