text-indent
CSS text-indent Property
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.
| 类目 | 类目 |
|---|---|
| Initial Value | 0 |
| Applies to | Block containers. |
| Inherited | Yes. |
| Animatable | Yes. Text-indent is animatable. |
| Version | CSS1 |
| DOM Syntax | object.style.textIndent = “100px”; |
Syntax
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>
Values
Values
| Value | Description | Play it |
|---|---|---|
| length | Specifies the indentation in px, pt, cm, em, etc. The default value is 0. Negative values are allowed. | Play it » |
| percentage | Specifies the indentation in percentage of the width of the containing block. | Play it » |
| each-line | Indentation affects the first line as well as each line after a forced line break, but does not affect lines after a soft wrap break.This value is an experimental technology. | |
| hanging | Inverts which lines are indented. First line is not indented.This value is an experimental technology. | |
| initial | Makes the property use its default value. | Play it » |
| inherit | Inherits the property from its parents element. |