Text indentation

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'.

Example

CSS text-indent property example:

<html>
<head>
<title>CSS tutorial</title>
<style type="text/css">
p {
	text-indent:5%;
}
</style>
</head>

<body>

<p>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 <i>overflow</i>.</p>
<p>Negative values used for text indentation are a common practice of removing parts of a text from the screen.</p>

</body>
</html>

›› go to examples ››

Example

CSS text-indent property example:

Comments

About

Contact

Get Connected