text-indent property sets the amount of white space that appears before lines of text in a block.
This white space is with respect to the left edge of the containing block if the
direction of text flow is from left-to-right (default) and to the right edge if it is from right-to-left. By default, only the first line of the block element is indented.
<length> : Specifies the amount of indent in px, em, pt, rem, etc. Negative values are allowed.
<percentage> : Specifies the amount of indent as a percentage of the width of the containing block.
hanging : Inverts which lines are indented. All the lines except the first line are indented, which makes it appear as if the first line is negatively indented.
each-line : Indentation affects the first line of the block level element and each line after a forced line break, but does not affect lines after a soft wrap break.
initial : Sets the default value of the property.
inherit : Inherits the value from parent element.
The following example shows the effect of
direction values on indentation. As stated earlier, if the value of the
direction property is set to
ltr (which is also its default value), then indentation is applied from the left edge of the containing block. If the value is
rtl, then indentation is applied from the right edge of the containing block.
See the Pen text-indent examples for different direction values by Aakhya Singh (@aakhya) on CodePen.
This property is supported in all major browsers. The values
each-line are not supported in any browser and are experimental values.
Indenting text makes it appear more neat and readable. Normally, the first paragraph or the paragraph following an image, a table or anything different from text is not indented. The paragraphs following other paragraphs are indented.