X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS text-indent Property

The text-indent property specifies the length of empty space of the first line in a text block.

The direction of the text is specified by the direction property.

If a negative value is specified, the first line will be indented to the left.

The text-indent only applies to the first line of text in an element.

The "each-line" and "hanging" values are experimental.

Initial Value 0
Applies to Block containers.
Inherited Yes.
Animatable Yes. Text-indent is animatable.
Version CSS1
DOM Syntax object.style.textIndent = "100px";

Syntax

text-indent: length | percentage | each-line | hanging | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
      text-indent: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Text-indent property example</h2>
    <p>This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property.</p>
  </body>
</html>

Another example where the indentation is specified in pt, em, % and cm:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.a {
      text-indent: 20pt;
      }
      div.b {
      text-indent: -5em;
      }
      div.c {
      text-indent: 70%;
      }
      div.d {
      text-indent: 4em;
      }
      div.e {
      text-indent: 5cm;
      }
    </style>
  </head>
  <body>
    <h2>Text-indent property example</h2>
    <h3>text-indent: 20pt</h3>
    <div class="a">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <h3>text-indent: -5em</h3>
    <div class="b">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <h3>text-indent: 70%</h3>
    <div class="c">
      Lorem Ipsum is dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <h3>text-indent: 4em</h3>
    <div class="d">
      Lorem Ipsum is dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <h3>text-indent: 5cm</h3>
    <div class="e">
      Lorem Ipsum is dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
  </body>
</html>

Values

Value Description
length Specifies the indentation in px, pt, cm, em, etc. The default value is 0. Negative values are allowed.
percentage Specifies the indentation in percentage of the width of the containing block.
each-line Indentation affects the first line 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. First line is not indented.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support

1.0+ 12.0+ 1.0+ 1.0+ 3.5+


Do you find this helpful?

Related articles