CSS Text-Indent Property



CSS Tutorial  >  Text  >  Letter-indent

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.

Next: CSS Text-Transform




Copyright © 2017   1keydata.com   All Rights Reserved   Privacy Policy   About   Contact