{"id":14113,"date":"2011-09-06T18:43:55","date_gmt":"2011-09-07T01:43:55","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14113"},"modified":"2017-05-30T08:42:19","modified_gmt":"2017-05-30T15:42:19","slug":"text-indent","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-indent\/","title":{"rendered":"text-indent"},"content":{"rendered":"

The text-indent<\/code> 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.<\/p>\n

The starting edge is usually on the left, but can be right if in right-to-left mode, ala the direction<\/a> property.<\/p>\n

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

Syntax<\/h3>\n
text-indent: <length> | <percentage> | inherit  && [ hanging || each-line ] \r\n\r\np {\r\n  text-indent: 1.5em;\r\n}<\/code><\/pre>\n
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. <\/p>\n
Another common use case is in “image replacement”<\/a> where text is kicked out of element via text-indent and hidden overflow. <\/p>\n
hanging<\/h4>\n
hanging<\/code> is an experimental and unofficial value<\/strong> for the text-indent<\/code> property. It inverts which lines are indented. Basically, it indent every line except the first, resulting in some sort of hanging-punctuation<\/a>.<\/p>\n
This value is a flag, going along with a common value like a length.<\/p>\n
each-line<\/h4>\n
each-line<\/code> is an experimental and unofficial value<\/strong> for the text-indent<\/code> property. The idea is to indent each line after a forced line break (with a <br><\/code>).<\/p>\n
This value is a flag, going along with a common value like a length.<\/p>\n
Demo<\/h3>\n
See the Pen text-indent<\/a> by Chris Coyier  (@chriscoyier<\/a>) on CodePen<\/a>.<\/p>\n
Related Properties<\/h3>\n