The 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.
CSS
text-indent: value;
Values
<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.
Examples
See the Pen text-indent examples by Aakhya Singh (@aakhya) on CodePen.
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.
Browser Support
This property is supported in all major browsers. The values hanging and each-line are not supported in any browser and are experimental values.
Conclusion
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.
