Line-height without units

Question

I saw people using line height without specifying a unit, like this: line-height: 1.5;

What does the number represents? I'm guessing it's a ratio so is it like em?

Answer 1

Yes, it is a ratio: 1.5 means 1.5 times the font size of the element. So it means the same as 1.5em or 150%, but with one important exception: in inheritance, when a pure number is used, the number is inherited, not the computed value.

So if you have an element with font size 24pt, line-height: 1.5 sets the line height to 36pt. But if the element has a child, i.e. an inner element, with font size of 10pt, and without any line height set on it, then the child inherits the line-height value of 1.5, which means 15pt for that element. If, on the other hand, the line height were set to 1.5em or 150%, then the child would inherit the computed value of 36pt, creating grotesque line spacing.

Technically, this is hidden under a formulation that says. for a pure number used as line-height value: “The computed value is the same as the specified value.” So, nominally, the child inherits the “computed” value of 1.5, which will then be interpreted in the context of the child (1.5 times its font size).