What's the difference between line-height:1.5 and line-height:150% in css?

Question

Anyone knows about it?

Answer 1

Both are equivalent.

line-height: 1.5 (without units) will mutiply the element's font size by 1.5 to compute the line height.

line-height: 150% will take 150% of the element's computed font size to compute the line height, which is equivalent to multiply it by 1.5.

The three rules in the example below have the same resulting line height:

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 */

Now let’s have a look at the question you asked.

I reproduced the two cases:

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

In 1), the parent's div's line-height is set to 1.5 multiplied the div's actual font size. This property is inherited and recomputed for the child span because you changed its actual font size.

In 2), the parent's div's line-height is set to 150% of the div's computed font size. Then the computed font size of the span is inherited from the div therefore 150% of this inherited computed font size leads to the same value.

As @K Prime summed up, the take away is likely: line-height: 150% is static, line-height: 1.5 is dynamic

References:

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

Answer 2

line-height:  normal | 

<number>| 

<length>| 

<percentage>

From line-height

<number>

The used value is this unitless multiplied by the element's font size. The computed value is the same as the specified . In most cases this is is the preferred way to set line-height with no unexpected results in case of inheritance.

<percentage>

Relative to the font size of the element itself. The computed value is this percentage multiplied by the element's computed font size.

Answer 3

Short version: line-height: 150% is static, line-height: 1.5 is dynamic. The effect is more evident on inheriting elements. An example:

HTML

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

This CSS

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

As opposed to this:

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

You may read more at the CSS2 specs page