Flash cards
Review the key moves
What is the main idea behind CSS Text Spacing?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___-indent: 50px;Put the learning moves in the order that makes the concept easiest to apply.
CSS has several properties to control text spacing.
In this chapter you will learn about the following properties:
- text-indent
- letter-spacing
- line-height
- word-spacing
- white-space
CSS Text Indentation
The CSS text-indent property is used to specify the indentation of the first line in a text-block.
Tip
Negative values are allowed. The first line will be indented to the left if the value is negative.
Example
p {
text-indent: 50px;
}Live preview
CSS Letter Spacing
The CSS letter-spacing property is used to specify the space between the characters in a text.
Tip
Negative values are allowed.
Example
h1 {
letter-spacing: 5px;
}
h2 {
letter-spacing: -2px;
}Live preview
CSS Line Height
The CSS line-height property is used to specify the space between lines.
Note
Negative values are not allowed.
Example
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}Live preview
CSS Word Spacing
The CSS word-spacing property is used to specify the space between the words in a text.
Tip
Negative values are allowed.
Example
p.one {
word-spacing: 10px;
}
p.two {
word-spacing: -2px;
}Live preview
CSS White Space
The CSS white-space property specifies how white-space inside an element is handled.
This property can have one of the following values:
- normal
- nowrap
- pre
- pre-line
- pre-wrap
Example
p {
white-space: nowrap;
}Live preview
The CSS Text Spacing Properties
| Property | Description |
|---|---|
| letter-spacing | Specifies the space between characters in a text |
| line-height | Specifies the line height |
| text-indent | Specifies the indentation of the first line in a text-block |
| white-space | Specifies how to handle white-space inside an element |
| word-spacing | Specifies the space between words in a text |