Web Design in a Nutshell

Name

line-height

Values:

normal| number | length | percentage

Example:

P { line-height: 1.2 }

P { line-height: 1.2em }

P { line-height: 120% }

Applies to:

All elements

Inherited:

Yes

The line-height property sets the distance between the baselines of adjacent lines of text. In traditional publishing, this measurement is called “leading” and can be used to create different effects by adding white space to the block of text.

The default value is normal, which corresponds to 100-120% depending on the browser’s interpretation of the tag. When a number is specified alone, that number will be multiplied by the current font size to calculate the line-height value. Line-heights can also be specified using any of the length units described earlier. Percentage values relative to the current (inherited) font size may also be used.

These examples demonstrate three alternative methods for the same amount of line spacing. For example, if the point size is 12 pt, the resulting line-height for each of the examples listed would be 14.4 pts.