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.

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid certificates of completion

100% FREE

Pros

• Professional service
• Flexible timetables
• A variety of features to choose from

Main Features

• Professional certificates of completion
• University-level courses
• Multiple Online degree programs

100% FREE

Pros

• Great user experience
• Offers quality content
• Very transparent with their pricing

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

100% FREE

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+