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.

Horizontal spacing is with respect to the left (or right, for right-to-left layout) edge of the containing block element's 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 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

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

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

Browser compatibility

[1] Gecko does not yet implement this. See bug 784648.