CODEWITHSUNDEEP
linetypographycss
ilyo
ilyo

Reputation: 36411

Line-height without units

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?

Upvotes: 31

Views: 13701

Answers (6)

Masih Jahangiri
Masih Jahangiri

Reputation: 10917

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

Upvotes: 1

Simon_Weaver
Simon_Weaver

Reputation: 145990

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;

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201608

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

Upvotes: 37

techfoobar
techfoobar

Reputation: 66663

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

Upvotes: -1

andyb
andyb

Reputation: 43823

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.

Upvotes: 20

Sirko
Sirko

Reputation: 74076

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.

Upvotes: 2

Related Questions