Web Design in a Nutshell, 2nd Edition

Name

line-height

Synopsis

In simplified terms, the line-height property sets the distance between the baselines of adjacent lines of text (the real calculation method is a great deal more complicated). 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 is 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.

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