text-indent

The text-indent property specifies how much horizontal space text should be moved before the beginning of the first line of the text content of an element. Spacing is calculated from the starting edge of the block-level container element.

The starting edge is usually on the left, but can be right if in right-to-left mode, ala the direction property.

The text-indent property is inherited when specified on a block element, which means it will affect inline-block descendant elements as well. When dealing with inline-block children, you may want to force them to text-indent: 0;.

Syntax

text-indent:  |  | inherit  && [ hanging || each-line ] 

p {
  text-indent: 1.5em;
}

A common use case would be simply stylistic. Indenting the first line of paragraphs is kind of old fashioned and can evoke that feel. It could be used in lieu of spacing after paragraphs as an alternative visual indicator, although spacing is probably more readable in general.

Another common use case is in “image replacement” where text is kicked out of element via text-indent and hidden overflow.

hanging

hanging is an experimental and unofficial value for the text-indent property. It inverts which lines are indented. Basically, it indent every line except the first, resulting in some sort of hanging-punctuation.

This value is a flag, going along with a common value like a length.

each-line

hanging is an experimental and unofficial value for the text-indent property. The idea is to indent each line after a forced line break (with a <br>).

This value is a flag, going along with a common value like a length.

Demo

<article>
  <h2>text-indent: 2em</h2>
  <p class="first">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  
  <h2>text-indent: -2em</h2>
  <p class="second">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  
  <h2>text-indent: 50%</h2>
  <p class="third">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo
  
  <h2>text-indent: 100%</h2>
  <p class="fourth">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</article>

Related Properties

• ::first-line
• hanging-punctuation

Browser Support

Basic support

hanging value

each-line value