The text-indent property specifies the text indentation of the first line of text inside a block container.
The text-indent property contains following information:
- value: <length>, <percentage> or inherit;
- initial: 0;
- applies to: block containers;
- inherited: yes;
- percentages: refers to width of container;
- media: visual;
- computed value: absolute length or specified percentage.
The text-indent property may have a negative value. In such a case or in case it exceeds the container width, it may overflow the block edge. Such a situation can be controlled with the property called overflow.
Negative values used for text indentation are a common practice of removing parts of a text from the screen. For instance it is known that search engine use headings for the web page's indexation, therefore if a designer wants to inform the search engine about an important part of his / her page but wants to visually present it with a 'cool' image, he / she may insert a heading but displace it out of the screen so visitors don't see it. In such cases this property is usually set to '-9999px'.
CSS text-indent property example: