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.
The "each-line" and "hanging" values are experimental.
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>
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>
