Text Indentation

CSS Text Indentation

The CSS text-indent property controls the indentation of the first line of text in a block. It can move the first line inward or outward and is commonly used to create traditional paragraph indents or hanging indents.

The text-indent Property

The CSS text-indent property specifies how far the first line of text is moved from its normal starting position within a block container.

p {
  text-indent: 40px;
}

This rule moves the first line of each paragraph inward by 40 pixels. Lines that wrap after the first line are not indented by this value.

Positive Text Indentation

A positive text-indent value moves the first line inward from its normal starting position.

p {
  text-indent: 2em;
}

Using em makes the indentation relative to the element's font size. With a font size of 16 pixels, 2em produces an indent of 32 pixels.

Positive indentation is commonly used to visually separate the beginning of one paragraph from another.

Negative Text Indentation

A negative value moves the first line in the opposite direction. Depending on the layout, this can position the first line outside the normal text area.

p {
  text-indent: -20px;
}

Negative indentation should be used carefully because text can extend beyond the element or become clipped when there is not enough available space.

Text Indentation Units

The text-indent property accepts CSS length units such as px, em, and rem.

.pixels {
  text-indent: 40px;
}

.relative {
  text-indent: 2em;
}

A pixel value provides a fixed indentation, while an em value changes with the element's font size. Relative units are useful when the indentation should scale along with the text.

Percentage Indentation

The text-indent property can also use a percentage. Unlike an em value, the percentage is calculated from the width of the containing block rather than from the font size.

p {
  text-indent: 10%;
}

As the width of the containing block changes, the amount of indentation changes with it.

Creating a Hanging Indent

A hanging indent places the first line farther toward the edge while the remaining lines begin farther inward. One simple way to create this effect is to combine a negative text-indent value with matching left padding.

p {
  padding-left: 30px;
  text-indent: -30px;
}

The padding provides room for the negatively indented first line so that it does not extend outside the intended content area.

Try Different Text Indents

Edit the text-indent values in the example to compare no indentation, positive indentation, and a hanging indent.

Text Indentation and Inheritance

The text-indent property is inherited. Descendant block containers can inherit the indentation applied to a parent unless another CSS rule specifies a different value.

section {
  text-indent: 2em;
}

section p {
  text-indent: 0;
}

The paragraphs use text-indent: 0;, preventing the inherited indentation from being applied to their first lines.

When to Use Text Indentation

Text indentation can be useful for traditional paragraph formatting, quotations, references, and layouts that use hanging indents. It should be used for presentation rather than inserting spaces or other characters into the HTML to create visual indentation.

When paragraphs are already separated clearly with vertical spacing, first-line indentation may not be necessary. Choose the approach that makes the structure of the text easiest to recognize and read.

Summary

The CSS text-indent property controls the indentation of the first line of text in a block. Positive values move the first line inward, negative values move it in the opposite direction, and lengths or percentages can determine the amount of indentation. Negative indentation can also be combined with padding to create a hanging indent.

The next tutorial covers Text Shadow and how CSS adds shadow effects to text.