CSS Text-Indent Property

The text-indent property specifies how much space to indent before the first line of text in a block. The syntax for text-indent is as follows:

text-indent: <value>

Two types of <value> are possible:

• length: this is a numerical value plus a length unit.
• percentage: this is the percentage of the element width.

Below are some examples.

Example 1: Text-indent as absolute length

p {   text-indent: 15px; }

The following HTML,

<p>This text is indented by 15px at the beginning of the paragraph. Subsequent lines are not indented.</p>

renders

This text is indented by 15px at the beginning of the paragraph. Subsequent lines are not indented.

Example 2: Text-indent as a percentage of the element width

p {   text-indent: 20%; }

The following HTML,

<p>This text is indented by 20% at the beginning of the paragraph. Subsequent lines are not indented.</p>

renders

This text is indented by 20% at the beginning of the paragraph. Subsequent lines are not indented.

CSS3 has introduced an optional <keyword> component to text-indent. The syntax is as follows:

text-indent: <value> <keyword>

There are two possible values for <keyword>:

• each-line: indicates that the text-indent property applies to every line in the element.
• hanging: indicates that the text-indent property applies to every line in the element except for the first line.

Most major browsers have not implemented the <keyword> component for text-indent at this time.