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. |
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
How to read CSS syntax.<length> | <percentage> && [ hanging || each-line ]
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;
}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 |
Browser compatibility
[1] Gecko does not yet implement this. See bug 784648.
Document Tags and Contributors
Tags:
Contributors to this page:
Sebastianz,
Simplexible,
Prinz_Rana,
Sheppy,
coeurl,
fscholz,
wbamberg,
tregagnon,
ebogucka,
y0ssar1an,
teoli,
Majken,
codepo8,
kscarfone,
roryokane,
ethertank,
bfrohs,
AndreeaStanciu,
estelle,
FredB,
Jürgen Jeka,
BijuGC
Last updated by:
Sebastianz,