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

css

Solution

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

Problem

Original source