CSS text-indent Property

The CSS text-indent property controls the indentation of the first line of text in a block.

Text indentation is commonly used to visually separate the beginning of a paragraph. CSS allows the first line to be moved inward with a positive value or outward with a negative value.

text-indent Syntax

The text-indent property accepts a CSS length or percentage value that determines how far the first line is offset from its normal starting position.

p {
  text-indent: 40px;
}

This rule moves the first line of each matching <p> element inward by 40px. Lines that wrap after the first line begin at their normal position.

Positive Indentation

A positive text-indent value moves the first line inward from the starting edge of the text.

p {
  text-indent: 2em;
}

Using a relative unit such as em allows the indentation to scale with the text size.

Negative Indentation

A negative text-indent value moves the first line in the opposite direction. This can be used to create a hanging indent when the surrounding layout provides enough space for the text.

p {
  padding-left: 2em;
  text-indent: -2em;
}

In this example, the left padding moves the entire paragraph inward while the negative indent moves only the first line back toward the starting edge.

Text Indent Units

The text-indent property accepts CSS length units such as px, em, and rem. The best unit depends on how the indentation should relate to the surrounding design and text size.

.pixels {
  text-indent: 40px;
}
.em-units {
  text-indent: 2em;
}
.rem-units {
  text-indent: 2rem;
}

An em value scales with the element's font size, while a rem value is relative to the font size of the root <html> element.

Percentage Indentation

The text-indent property also accepts percentages. A percentage is calculated relative to the width of the element's containing block.

p {
  text-indent: 10%;
}

Because percentage indentation depends on the available width, the amount of indentation can change as the layout becomes wider or narrower.

Inheriting text-indent

The text-indent property is inherited. Descendant block containers can therefore receive the computed indentation from their parent unless another rule specifies a different value.

article {
  text-indent: 2em;
}

When applying indentation to a container, remember that inherited indentation can affect descendant text blocks. Applying text-indent directly to the paragraphs that need it often provides more predictable control.

text-indent Example

The following example uses the text-indent property to indent the first line of a paragraph by 40px. Open the example in the editor and change 40px to another value. Try 0, 80px, 2em, 4rem, 10%, or -20px, then run the code to compare the results.

p {
  text-indent: 40px;
}

Play in Editor