How to change the line spacing
Short answer
line-height sets the line spacing:
<p style="width: 260px; line-height: 1.2;">Tight lines are fine for short headings but hard to read in long text.</p>
<p style="width: 260px; line-height: 1.7;">Looser lines make long paragraphs much easier to read.</p>For body text 1.5 to 1.7 works well, for headings 1.1 to 1.3.
Without units
A unitless number is a multiplier of the element's own font size. Descendants inherit it and recalculate it for their font. A value in px or em is inherited as a fixed number and can be too small for a large heading inside:
<div style="line-height: 16px; width: 260px;">
<h3 style="margin: 0;">This heading overlaps itself when it wraps</h3>
</div>Space between paragraphs
line-height changes the spacing inside a paragraph. The space between paragraphs is margin:
p { margin: 0 0 1em; }Common mistake
Trying to space out paragraphs with line-height or tighten the spacing with a negative margin. Each property has its own job: lines inside a paragraph are line-height, space between blocks is margin or gap.
Functions used in this recipe
- line-height — The height of a line of text — the distance between lines.
- margin — The outer spacing of an element — the distance to its neighbors.
- font-size — The size of the font.