CSS: line-height

By Xah Lee. Date: . Last updated: .

Property line-height

CSS line-height property defines the height of a line.

Valid values

normal

default.

Browser computes the value. Result depends on font used. Result is similar to line-height: 1.2

number
p {
 line-height: 1.5;
}

means the number multiplied by the font size of the element.

the final actual length of line height may be different for each child of the element.

For example, let's say you set line-height: 3 on element A. Element A has children B1 B2. B1 have font size 10px, B2 font size 20px. For each child B1 B2, its actual length of line height are (10px * 3) and (20px * 3).

CSS length unit

e.g. px, rem.

The value does not change for each child of the element. e.g. if you set line height to 20px, it's always that even for child elements that have large font size.

percentages

Relative to the font size of the element itself.

The value does not change for each child of the element.

CSS. Text content related.