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?

Averell

Answer 1

line-height@ Mozilla Developer Network has a very good explanation (and examples) which is a easier to understand compared to the line-heightCSS specification.

line-height can have the value specified in one of the following ways

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

In your case, you are using a <number> which is described as:

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

Hamm

So we can say the default unit of line-height is em? – Isomerize

The default value is normal which is roughly 1.2 depending on the element's font-family. There is no default unit. However line-height: 1.2 is equivalent to using line-height: 1.2em but there are issues when the rule is inherited - see https://mcmap.net/q/331461/-em-39-s-for-line-height – Hamm

It's worth mentioning, since @Isomerize and @Hamm have brought up the default of normal, that this is one of the less common situations where the default is NOT accessible. Minimum acceptable line-height per WCAG standards is 1.5. Per the other comments, line-height should be unitless and should leverage inheritance. Ideally, line-height rules should occur once or twice in an entire application. – Originally

Answer 2

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).

Rambler

Answer 3

See the respective spec @W3C:

The used value of the property is this number multiplied by the element's font size. Negative values are illegal. The computed value is the same as the specified value.

So as you guessed it is a ratio and relates to the current font-size.

Andreandrea

Answer 4

Short answer by example

The used value is this unitless multiplied by the element's font size.

If the font-size of element is 16px:

line-height: 1 // 16px
line-height: 0.5 // 8px
line-height: 1.5 // 24px

Nickens

Answer 5

You can also use rem in order to to use the root em size instead of the current font size.

So these are both line height of twice the current font-size

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

But this is a line height of twice the ROOT font size

font-size: 2rem;

Annulus

Answer 6

line-height: X; basically translates to line-height: (X*100)%;

line-height: 1; is the same as line-height: 100%;

Similarly,

line-height: 1.5; is the same as line-height: 150%;

---

Where line-height: X%; means X% of the line-height of the currently set font and size for the element.

For example, if the line-height for an element as per the current set font and size is 24px, line-height: 150% would make its line-height 36px. And so on..

Case

It is not, the difference is how they handle computed values of child elements. The one inherits the computed lione heights, while the other recomputes it based on the unitless ratio. – Nibelung