Controlling the Line Height

The line-height property is used to specify a line height for an element. The line height is the vertical distance separating the baselines of adjacent lines of text. The line-height property takes these kinds of values: length, percentage, and numerical values, as well as a normal value.

A length value sets the line height utilizing a relative measuring unit (em, ex, or px) or an absolute measuring unit (in, cm, mm, pt, or pc). Just like when setting font sizes, you're probably better off setting line heights using em units, with pixel units being a possible second choice. Here's an example of setting the line height of the P element to 1.5 ems (see Figure 8.6):

 h1 { text-align: center; font-size: 2.5em; color: rgb(200,140,40); ...

Get Cascading Style Sheets (CSS) by Example now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.