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.

WARNING

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

Syntax of CSS text-indent Property

css

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

Example of the text-indent property:

Example of CSS text-indent Property with px value

html

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

Try it Yourself »

Result

Text indent property

Example of the text-indent property specified in "pt", "em", "%" and "cm":

Example of CSS text-indent Property with pt, cm, % and em values

html

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

Try it Yourself »

Values

Value	Description	Play it
length	Specifies the indentation in px, pt, cm, em, etc. The default value is 0. Negative values are allowed.	Play it »
percentage	Specifies the indentation in percentage of the width of the containing block.	Play it »
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.This value is an experimental technology.
hanging	Inverts which lines are indented. First line is not indented.This value is an experimental technology.
initial	Makes the property use its default value.	Play it »
inherit	Inherits the property from its parents element.

Practice

What does the text-indent property in CSS do?

It indents the first line of text in a block.It changes the color of the text.It indents all the lines of text in a block.It adjusts the size of the text.It manipulates the line-height of text in a block.

CSS text-indent Property ​

Syntax ​

Example of the text-indent property: ​

Result ​

Example of the text-indent property specified in "pt", "em", "%" and "cm": ​

Values ​