text-indent

Sets the indentation of the first line of text in a block.

Initial value: 0
Inherited: Yes
Animatable: yes, as a length or percentage
Applies to: block containers
JavaScript: element.style.textIndent = "2em"

On this page

Example
Definition and usage
Syntax
Values
Values in practice
Browser support
Good practices
Related entries

Example

CSS

.book p + p {
  text-indent: 1.5em;
  margin-top: 0;
}

Example HTML

<div class="book">
  <p style="margin: 0">The first paragraph of a chapter usually has no indent.</p>
  <p style="text-indent: 1.5em; margin: 0">The following paragraphs start with an indent and have no space between them, just like in books.</p>
</div>

Preview

Definition and usage

The text-indent property shifts the first line of text in a block by the given amount. This is the classic look of a paragraph in a printed book: the first line starts with an indent, and the following ones start at the edge.

A negative value creates what’s called a hanging indent: the first line sticks out to the left ahead of the rest. This is used, for example, in bibliographies.

Percentages are calculated against the width of the block. The indent only affects the first line of the block, and it isn’t repeated after a forced line break from <br>.

Syntax

text-indent: <length> | <percentage>;

Values

0
The first line starts at the edge.
2em
<length>
A classic paragraph indent.
-1.5em
negative value
A hanging indent on the first line, to the left.

Value	Type	Description
0		The first line starts at the edge.
2em	<length>	A classic paragraph indent.
-1.5em	negative value	A hanging indent on the first line, to the left.

Values in practice

The first line starts at the edge.

.demo { text-indent: 0; }

2em

A classic paragraph indent.

.demo { text-indent: 2em; }

-1.5em

A hanging indent on the first line, to the left.

.demo { text-indent: -1.5em; padding-left: 1.5em; }

Browser support

Widely available

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

In book typography you use either an indent or space between paragraphs, rarely both at once.
Don’t hide text with a large negative indent. The old text-indent: -9999px trick hurts accessibility.

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice CSS in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course