text-indent

Avatar of Sara Cope
Sara Cope on (Updated on )

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

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: <length> | <percentage> | 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

each-line 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

See the Pen text-indent by Chris Coyier (@chriscoyier) on CodePen.

Related Properties

Other Resources

Browser Support

Basic support

Chrome Safari Firefox Opera IE Android iOS
any any any 3.5+ 3+ any any

hanging value

Chrome Safari Firefox Opera IE Android iOS
none none none none none none none

each-line value

Chrome Safari Firefox Opera IE Android iOS
none none none none none none none