26

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?

ilyo
  • 35,851
  • 46
  • 106
  • 159

6 Answers6

29

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

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
19

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.

andyb
  • 43,435
  • 12
  • 121
  • 150
  • 4
    So we can say the default unit of line-height is *em*? – Rick Mar 07 '19 at 08:51
  • 4
    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://stackoverflow.com/a/15135142/637889 – andyb Mar 07 '19 at 22:05
  • It's worth mentioning, since @Rick and @andyb 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](https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html) 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. – cage rattler Dec 28 '22 at 15:44
2

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.

Sirko
  • 72,589
  • 19
  • 149
  • 183
1

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
Masih Jahangiri
  • 9,489
  • 3
  • 45
  • 51
0

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;
Simon_Weaver
  • 140,023
  • 84
  • 646
  • 689
-1

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

techfoobar
  • 65,616
  • 14
  • 114
  • 135
  • 1
    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. – Marius Apr 07 '17 at 02:07