text-indent

Definition

The text-indent CSS property is used to specify the indentation of the first line of text within a block-level element. It allows you to control the horizontal positioning of the first line, creating an indentation effect.

The text-indent property accepts various values:

A length value, such as px or em, specifies a fixed measurement for the indentation. Positive values move the first line to the right, while negative values move it to the left.
A percentage value, such as %, is relative to the width of the containing block. Positive values move the first line to the right, while negative values move it to the left.
The inherit keyword, which specifies that the value should be inherited from the parent element.

Here’s an example:

.indented-text {
  text-indent: 2em;
}

In this example, the .indented-text class sets the text-indent property to 2em, causing the first line of text within the element to be indented by 2 times the size of the current font.

It’s important to note that the text-indent property only affects the first line of the element’s content. Subsequent lines will not be affected unless you use additional CSS techniques or properties to control the indentation for multiple lines.

The text-indent property is commonly used for creating hanging indents in paragraphs, where the first line is indented but subsequent lines are aligned to the left margin. It can also be used to create other indentation effects for different text elements as needed.

Keep in mind that text-indent may have unintended consequences for certain elements like headings or list items, where it may conflict with the default styling or structure. It’s important to use it judiciously and consider the impact on readability and design when applying indentation to different elements.

Syntax

p + p {
  text-indent: 1.5em;
}

Values

<length>: indent size using em, rem, px, etc.
<percentage>: relative to the element’s width.
each-line: indent each wrapped line in addition to the first line.
hanging: reverse indentation to create hanging indents for lists/bibliographies.

Practical Examples

article p + p {
  text-indent: 1.75em;
}

First-line indents help differentiate paragraphs in long-form typography.

HTML

Design systems balance consistency with flexibility, letting teams ship features faster.

Applying text-indent to subsequent paragraphs creates a classic editorial rhythm.

Code

<article class="space-y-4 rounded-xl border border-slate-200 bg-white p-6 shadow-sm text-slate-700">
  <p>Design systems balance consistency with flexibility, letting teams ship features faster.</p>
  <p style="text-indent: 1.75em;">Applying <code>text-indent</code> to subsequent paragraphs creates a classic editorial rhythm.</p>
</article>

Tips & Best Practices

Combine with p + p selectors to avoid indenting the first paragraph of a section.
Use hanging with ordered lists or references to align numbers on the left.
Keep indents proportional (em units) so they scale with type size.

Accessibility & UX Notes

Maintain adequate leading so indented lines remain readable; avoid over-indent on narrow screens.

Browser Support

Widely supported. The each-line and hanging keywords require modern browsers (Safari 15+, Chrome 110+, Firefox 72+).

line-height for paragraph rhythm.
margin-block-start to separate sections.
text-align for additional paragraph control.