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

EXCLUSIVE: 75% OFF

Pros

• Easy to navigate
• No technical issues
• Seems to care about its users

Main Features

• Huge variety of courses
• 30-day refund policy
• Free certificates of completion

AS LOW AS 12.99$

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

75% DISCOUNT

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+