text-indent

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.

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's width.
each-line This is an experimental API that should not be used in production code.
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 This is an experimental API that should not be used in production code.
Inverts which lines are indented. All lines except the first line will be indented.

Formal definition

Initial value0
Applies toblock containers
Inheritedyes
Percentagesrefer to the width of the containing block
Computed valuethe percentage as specified or the absolute length, plus any keywords as specified
Animation typea length, percentage or calc();

Formal syntax

<length-percentage> && hanging? && each-line?where <length-percentage> = <length> | <percentage>

Examples

Simple indent

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;
}

Result

Percentage indent

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;
}

Result

Specifications

Specification Status Comment
CSS Text Module Level 3
The definition of 'text-indent' in that specification.
Candidate Recommendation Adds the hanging and each-line keywords.
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.

Browser compatibility

BCD tables only load in the browser

See also