Grow your CSS skills. Land your dream job.

text-indent

Last updated on:

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

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

Check out this Pen!

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

Comments

  1. adidas パーカー

  2. Prout
    Permalink to comment#

    > [_Your text to link here..._****](http://prout.com "prout")

  3. Dave
    Permalink to comment#

    Dude/old chap, I think you meant to put “each-line is an experimental and unofficial value…”

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".