CSS text-indent Property

In CSS, the text-indent property is used to specify the indentation of the first line of each block of text. It can also accept negative values. That is, if the value is negative, the first line is indented to the left.

Horizontal spacing is measured from the left (or right, for right-to-left layout) edge of the content box of the containing block-level element.

Syntax

text-indent: length | initial | inherit;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .ex1 {
        text-indent: 50px;
    }
    .ex2 {
        text-indent: -2em;
    }
    .ex3 {
        text-indent: 30%;
    }
</style>
</head>
<body>

<p class="ex1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<p class="ex2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<p class="ex3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>

</body>
</html>

Preview

Property Values

Value	Description
length	Defines a fixed indentation in px, pt, cm, em, and other units. The default value is zero.
%	Defines the indentation as a percentage of the parent element's width.
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Property	Chrome	Firefox	Safari	Edge / IE	Opera
text-indent	1.0	1.0	1.0	3.0	3.5

text-decoration-thickness

text-justify

CSS text-indent Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us