text-indent

text-indent adds space at the inline start of selected lines in a block container. With a plain length, it affects the first line, not the padding or position of the whole paragraph.

Indent only the first line

The first line begins 2em inward. Soft-wrapped continuation lines start at the normal content edge.

<p>
  Read a complete example before changing it. The continuation lines show which
  part of this paragraph is indented.
</p>

p {
  max-width: 25ch;
  text-indent: 2em;
  line-height: 1.6;
  background: #eff6ff;
}

A hanging reference without newer keywords

Inline-start padding reserves space. A matching negative first-line indent pulls only the first line back, leaving continuation lines aligned inward. The text remains reachable instead of being pushed offscreen.

<p class="reference">
  [1] Practice Notes: an example reference with a long title that wraps onto
  another line.
</p>

.reference {
  max-width: 28ch;
  padding-inline-start: 2em;
  text-indent: -2em;
  line-height: 1.6;
}

Values and defaults

The initial value is 0 and text-indent is inherited. Lengths and percentages can be negative. Percentages use the block container’s own inner inline size in the current specification. An em indent scales with the element’s font size; the direction is inline-start, not always left.

Each-line additionally indents lines after forced breaks such as br, not every soft-wrapped line. Hanging reverses which eligible lines receive the indent. Both need value-specific support checks: the current MDN data records later support than the old lesson claimed for Chrome and Firefox.

Common mistakes

A positive first-line indent is not a hanging indent. A large negative indent used to hide content can leave text inaccessible at zoom or in another writing mode. Reserve an actual padding area when outdenting a visible reference.

Learn padding, line-height, and writing-mode. The CSS Text specification defines the percentage basis and line selection.

Sources and browser support

MDN: text-indent describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.