The text-indent CSS property sets the length of empty space (indentation) that is put before lines of text in a block.
Horizontal spacing is with respect to the left (or right, for right-to-left layout) edge of the containing block-level element's content box.
/* <length> values */ text-indent: 3mm; text-indent: 40px; /* <percentage> value relative to the containing block width */ text-indent: 15%; /* Keyword values */ text-indent: 5em each-line; text-indent: 5em hanging; text-indent: 5em hanging each-line; /* Global values */ text-indent: inherit; text-indent: initial; text-indent: unset;
<length><length>. Negative values are allowed. See <length> values for possible units.<percentage><percentage> of the containing block's width.each-line
hanging
<length-percentage> && hanging? && each-line?where
<length-percentage> = <length> | <percentage>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
p {
text-indent: 5em;
background: powderblue;
} <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> p {
text-indent: 30%;
background: plum;
} | Specification | Status | Comment |
|---|---|---|
| CSS Text Module Level 3 The definition of 'text-indent' in that specification. | Working Draft | Adds the hanging and each-line keywords. |
| CSS Transitions The definition of 'text-indent' in that specification. | Working Draft | Lists text-indent as animatable. |
| CSS Level 2 (Revision 1) The definition of 'text-indent' in that specification. | Recommendation | The behavior with display: inline-block and anonymous block boxes is explicitly defined. |
| CSS Level 1 The definition of 'text-indent' in that specification. | Recommendation | Initial definition. |
| Initial value | 0 |
|---|---|
| Applies to | block containers |
| Inherited | yes |
| Percentages | refer to the width of the containing block |
| Media | visual |
| Computed value | the percentage as specified or the absolute length, plus any keywords as specified |
| Animation type | a length, percentage or calc(); |
| Canonical order | The length or percentage before the keywords, if both are present. If several keywords are present, they appear in the same order as their appearance in the formal grammar. |
| Desktop | ||||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
| Basic support | 1 | 12 | 1 | 3 | 3.5 | 1 |
each-line
|
No | No | No | No | No | No |
hanging
|
No | No | No | No | No | No |
| Mobile | |||||||
|---|---|---|---|---|---|---|---|
| Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
| Basic support | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
each-line
|
No | No | No | No | No | No | No |
hanging
|
No | No | No | No | No | No | No |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent