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: <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. User Avatar
    ck バッグ
    Permalink to comment#

    adidas パーカー

  2. User Avatar
    Prout
    Permalink to comment#

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

  3. User Avatar
    Dave
    Permalink to comment#

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

  4. User Avatar
    Joseph ronald martelly
    Permalink to comment#

    nice

  5. User Avatar
    jai
    Permalink to comment#

    nice..im using this in mobile application,in portarit view its working..in landscape view its not working

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag