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:

  1. value: <length>, <percentage> or inherit;
  2. initial: 0;
  3. applies to: block containers;
  4. inherited: yes;
  5. percentages: refers to width of container;
  6. media: visual;
  7. 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'.

Example

CSS text-indent property example:

 

›› go to examples ››