🎓 A1Learner
🔍

CSS Text Spacing

Text spacing is the space inside text between letters, words and lines. Three properties set those gaps.

Space out the heading letters

The letter-spacing property adds space after each letter.

h1 {
  letter-spacing: 3px;
}

Space out the words

The word-spacing property adds space between words.

.intro {
  word-spacing: 8px;
}

Set the height of each line

The line-height property sets the height of each line box. The plain number 2 doubles the font size.

.box p {
  line-height: 2;
}

Example

h1 {
  letter-spacing: 3px;
}
.intro {
  word-spacing: 8px;
}
.box p {
  line-height: 2;
}
#demo {
  letter-spacing: 2px;
}

Key points

  • Spacing can take negative values, which pull letters or words closer.
  • A plain number for line-height scales with the font size.
  • Spacing passes down to elements inside the block.
  • Letter-spacing and word-spacing widen text by adding space inside it.

In this example, the heading letters get 3 pixels of extra space. The intro words get 8 pixels of extra space. The paragraph inside the box gets a line height of twice its font size. The demo paragraph gets a small letter space.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

Which property sets the height of each line box?