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”;
Tóm Tắt
Syntax
text-indent
: length | percentage | each-line | hanging | initial | inherit;Example of the
text-indent
property:
<
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
>Try it Yourself »
Result
Example of the text-indent property specified in “pt”, “em”, “%” and “cm”:
<
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
>Try it Yourself »
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.
