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.

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

<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

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

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.

text-indent

Syntax

Values

Formal syntax

Simple indent example

HTML

CSS

Percentage indent example

HTML

CSS

Specifications

Browser compatibility

Метки документа и участники