Text
text-indent
text-indent sets the indentation of the first line of a paragraph. Negative values push the first line out to the left.
Syntax
<length-percentage> && hanging? && each-line?Preview
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
Presets
Drag the bottom-right corner to resize
Code
.box {
text-indent: 2em;
}Controls
text-indent2em
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
About
Writing the value
- A length or percentage:
1emindents by one character width. Percentages are relative to the element's width. Negative values push the first line out to the left. The initial value is0. hanging: flips which lines are indented, so every line except the first is indented.each-line: also indents the line after eachbrline break. Lines that wrap on their own are not indented.
hanging and each-line were added later, and browsers such as Chrome do not support them. Browsers without support drop the whole declaration, so the controls on this page leave them out.
Common patterns
- Indent the start of a Japanese paragraph by one character:
text-indent: 1em - Align the wrapped lines of a note: combine
padding-left: 1emwithtext-indent: -1em, so only the first line sticks out into the padding.
Watch out
The indent applies to the first line of a block (or inline-block) element. It has no effect on inline elements such as span.