The text-indent property specifies the length of empty space of the first line in a text block. The direction of the text is specified by the direction property. If a negative value is specified, the first line will be indented to the left. The text-indent only applies to the first line of text in an element.
| Initial Value | 0 |
| Applies to | Block containers. |
| Inherited | Yes. |
| Animatable | Yes. Text-indent is animatable. |
| Version | CSS1 |
| DOM Syntax | object.style.textIndent = “100px”; |
Syntax
text-indent: length | percentage | each-line | hanging | initial | inherit;Example of the text-indent property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-indent: 100px;
}
</style>
</head>
<body>
<h2>Text-indent property example</h2>
<p>
This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property.
</p>
</body>
</html>Result
Example of the text-indent property specified in “pt”, “em”, “%” and “cm”:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.a {
text-indent: 20pt;
}
div.b {
text-indent: -5em;
}
div.c {
text-indent: 70%;
}
div.d {
text-indent: 4em;
}
div.e {
text-indent: 5cm;
}
</style>
</head>
<body>
<h2>Text-indent property example</h2>
<h3>text-indent: 20pt</h3>
<div class="a">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<h3>text-indent: -5em</h3>
<div class="b">
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<h3>text-indent: 70%</h3>
<div class="c">
Lorem Ipsum is dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<h3>text-indent: 4em</h3>
<div class="d">
Lorem Ipsum is dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<h3>text-indent: 5cm</h3>
<div class="e">
Lorem Ipsum is dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</body>
</html>