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 |
adidas パーカー
> [_Your text to link here..._****](http://prout.com "prout")Dude/old chap, I think you meant to put “each-line is an experimental and unofficial value…”
nice
nice..im using this in mobile application,in portarit view its working..in landscape view its not working
gmail app doesn’t support this, is there anything else that can be used to replace text-indent ? thanks
Has anyone figured out how to do a double hanging indent aka a hanging indent on a hanging indent. For example, let’s say I have a
<div>that contains a bullet point line that exceeds the length of the div. I use a hanging indent to align the subsequent lines with the beginning of the actual text on the first line, leaving the bullet sticking out in front. So far so good. Now suppose that bullet point line has some child lines (each line is in its own<div>) that should properly be indented past the bullet line text. I can simply use the text-indent property which is fine unless this child line exceeds the width of the div. in this case the subsequent lines will align with the actual bullet out in front of all the other text. Any suggestions to handle this situation are appreciated.It should be highlighted that the text-indent property will be INHERITED.
Use this example for the importance on this detail:
with this css:
Then the part “dolor sit amet” will be double intended because of the parent delaration. I’ve looked for hours for a display bug on my app and i hope i can save someone others time.