Web/CSS/text-indent

The text-indent CSS property sets the length of empty space (indentation) that is put before lines of text in a block.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

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 '

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 definition

Initial value	0
Applies to	block containers
Inherited	yes
Percentages	refer to the width of the containing block
Computed value	the percentage as specified or the absolute length, plus any keywords as specified
Animation type	a 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;
}

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

Specifications

Specification	Status	Comment
CSS Text Module Level 3The definition of 'text-indent' in that specification.	Working Draft	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 1The definition of 'text-indent' in that specification.	Recommendation	Initial definition.

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
text-indent	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 3	Opera Full support 3.5	Safari Full support 1	WebView Android Full support ≤37	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 14	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
each-line	Chrome No support No	Edge No support No	Firefox No support No	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android No support No	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No
hanging	Chrome No support No	Edge No support No	Firefox No support No	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android No support No	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No

Legend

Full support  

Full support

No support  

No support

See also

• [[../../../Learn/CSS|Learn to style HTML using CSS]]
• Related CSS properties:
  • text-justify
  • text-orientation
  • text-overflow
  • text-rendering
  • text-transform
• CSS Text Decoration CSS module
• CSS Text module

text-indent by Mozilla Contributors is licensed under CC-BY-SA 2.5.