The CSS Line-Height Property

What does CSS line height mean?

Using the CSS line-height property, you can specify a custom height for a line box:

p.small {
    line-height: 20px;
}

p.big {
    line-height: 40px;
}

Increasing the CSS line height means adding extra space over and under the actual text characters. Manipulating this property allows you to change CSS line spacing, making the text easier to read:

p.small {
    line-height: 0.6;
}

p.big {
    line-height: 3;
}

The syntax for CSS line-height

The line-height CSS property requires to define one value:

line-height: value;

You can find all the ways to specify the value for the CSS line height in the table below.

Theory is great, but we recommend digging deeper!

CSS Animation Tutorial: Bring Interactivity into Your UI/UX

Jazeb Akram

5.0 (0)

CSS line height values

See one more example to see how percentages can be used for CSS line spacing:

p.small {
    line-height: 80%;
}

p.big {
    line-height: 150%;
}

Browser support

Chrome

1+

Edge

12+

Firefox

1+

IE

4+

Opera

7+

Safari

1+

Mobile browser support

Chrome

18+

Firefox

4+

Opera

10.1+

Safari

1+