HTML and CSS [Electronic resources]

Setting Line Height

Referred to in traditional typography as

leading , line height is the space between each line in a section of text. CSS enables you to control this using the line-height property, with length, number, or percentage values (see Example 9-7).

Example 9-7. Adding line height to paragraphs with length, number, and percentage

<p style="line-height: 20px;">I married early, and was happy to find in my wife a
 disposition not uncongenial with my own. </p>
<p style="line-height: 2;">Observing my partiality for domestic pets, she lost no
 opportunity of procuring those of the most agreeable kind.
 We had birds, gold fish, a fine
 dog, rabbits, a small monkey, and a cat.</p>
<p style="line-height: 65%;">This latter was a remarkably large and beautiful animal,
 entirely black, and sagacious to an astonishing degree.</p>

In the complete document, I set a body font to 14 pixels and then applied line-height inline for each paragraph I wanted to modify (see Figure 9-14).

Typically, it's a good idea to stick to the font's default line-height for best readability.