CSS text-indent Property

Definition and Usage

The text-indent property sets empty space before lines of text in a block container, at the inline-start edge of the content box. By default that indents the first line.

It is inherited. The initial value is 0. Use a length or percentage, and optionally add hanging and/or each-line.

CSS Syntax

Negative lengths are allowed (outdent). Percentages refer to the container’s inner inline size.

Property Values

How to Use text-indent

Apply it to a block element that wraps text, such as a paragraph.

1. Target a block container (p, div, and similar).
2. Set a length (2em) or percentage (10%) for a classic first-line indent.
3. Use a negative value to outdent the first line if needed.
4. Add hanging or each-line only when you need those behaviors and can accept newer browser support.

Live Preview

Change the indent on a short paragraph. Watch the first line move relative to the lines below.

CSS Examples

Each snippet focuses on text-indent with only the CSS needed to study it. Use Try It Yourself for a live editor.

<style>
  p {
    text-indent: 2em;
  }
</style>

<p>The first line is indented. The rest of the paragraph wraps normally under the left edge.</p>

<style>
  p {
    text-indent: 15%;
  }
</style>

<p>Fifteen percent of this paragraph box is empty before the first line of text begins.</p>

<style>
  p {
    text-indent: 2em hanging;
  }
</style>

<p>First line stays left. Following lines are pushed in by 2em when hanging is supported.</p>

Key Takeaways