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