CSS text-indent

The text-indent property sets the indentation of the first formatted line of a block of text. It is commonly used for paragraphs, editorial layouts and hanging indents.

Syntax

text-indent: 0;
text-indent: 2rem;
text-indent: -2rem;
text-indent: 10%;

Example

p.article-intro {
  text-indent: 2rem;
}
Result:

The first line starts with an indent, while the rest of the paragraph follows the normal text flow.

Negative indentation

Negative values can create hanging indents, often used in lists, references or special editorial layouts.

.hanging {
  padding-left: 2rem;
  text-indent: -2rem;
}

Common mistake

text-indent affects the first formatted line, not every line. For spacing all text away from an edge, use padding.

Related CSS topics