CSS - text-indent
The text-indent
property specifies the amount of indentation (empty space) should be left before lines of text in a block. By default, this controls the indentation of only the first formatted line of the block, but the hanging
and each-line
keywords can be used to change this behavior.
Syntax
/* <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;
Values
<length>
- Indentation is specified as an absolute
<length>
. Negative values are allowed. See<length>
values for possible units. <percentage>
- Indentation is a
<percentage>
of the containing block width. each-line
- Indentation affects the first line of the block container as well as each line after a forced line break , but does not affect lines after a soft wrap break .
hanging
- Inverts which lines are indented. All lines except the first line will be indented.
Formal syntax
<a href="css/text-indent#length-percentage"><length-percentage></a> <a href="css/value_definition_syntax#double_ampersand" title="Double ampersand">&&</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> hanging <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> each-line <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><p>where <br><code><length-percentage> = <a href="css/length" title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0"><length></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/percentage" title=""><percentage></a></code></p>
Description
The text-indent
property specifies the amount of indentation (empty space) should be left before lines of text in a block. By default, this controls the indentation of only the first formatted line of the block, but the hanging
and each-line
keywords can be used to change this behavior.
Horizontal spacing is with respect to the left (or right, for right-to-left layout) edge of the containing block element's box.
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 |
Animatable | yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers. |
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. |
Browser Compatibility
Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 (1.7 or earlier) | 1.0 | 3.0 | 3.5 | 1.0 (85) |
hanging |
No support[1] | No support | No support | No support | No support |
each-line |
No support[1] | No support | No support | No support | No support |
Feature | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 1.0 (1.9.2) | ? | ? | ? | ? |
hanging |
No support | No support | No support | No support | No support |
each-line |
No support | No support | No support | No support | No support |
[1] Gecko does not yet implement this. See bug 784648.
Specifications
Specification | Status | Comment |
---|---|---|
CSS Text Level 3 The definition of 'text-indent' in that specification. |
Working Draft | Added 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 have been explicitly defined. |
CSS Level 1 The definition of 'text-indent' in that specification. |
Recommendation | Initial definition |
Simple indent example
HTML
<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>
CSS
p { text-indent: 5em; background: powderblue; }
Percentage indent example
HTML
<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>
CSS
p { text-indent: 30%; background: plum; }
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/text-indent