text-indent

Summary

The text-indent CSS property specifies how much horizontal space should be left before the beginning of the first line of the text content of an element. 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

Formal syntax: <length> | <percentage> && [ hanging || each-line ]
text-indent: 3em       /* <length> values */
text-indent: 40px
text-indent: 15%       /* <percentage> values, relatives to the containing block width */
text-indent: each-line /* keywords values */
text-indent: hanging

text-indent: inherit
</percentage></length>

Values

<length>
Indentation is specified as fixed <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.

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 Content

<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 Content

p { 
  text-indent: 30%; 
  background: plum;
}

Specifications

Specification Status Comment
CSS Text Level 3 Working Draft Added the hanging and each-line keywords
CSS Transitions Working Draft Lists text-indent as animatable.
CSS Level 2 (Revision 1) Recommendation The behavior with display: inline-block and anonymous block boxes have been explicitly defined.
CSS Level 1 Recommendation  

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 Not supported Not supported Not supported Not supported Not supported
each-line Not supported Not supported Not supported Not supported Not supported
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support 1.0 (1.9.2) ? ? ? ?
hanging Not supported Not supported Not supported Not supported Not supported
each-line Not supported Not supported Not supported Not supported Not supported

See also

Document Tags and Contributors

Last updated by: Majken,
Hide Sidebar