CSS text-indent - Examples

CSS text-indent Property

CSS text-indent property sets the indentation of the first line in a text element.

The syntax to specify a value for text-indent property is

text-indent: value;

The following table gives the possible values that could be given to text-indent property.

Value	Description	Examples
CSS Length	A valid length in CSS Length Units.	text-indent: 50px;
Percentage	A percent of the parent element.	text-indent: 20%;
initial	Sets text-indent to default value.	text-indent: initial;
inherit	Inherits text-indent value from its parent element.	text-indent: inherit;

Examples

In the following examples, we set text-indent for the HTML Element(s), using text-indent property, with different possible values.

text-indent in pixels

In the following example, we set the text-indent for a paragraph, with 100px, using text-indent property.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            text-indent: 100px;
        }
    </style>
</head>
<body>
    <p id="p1">This is a paragraph with 100px text-indent. This is a paragraph with 100px text-indent. This is a paragraph with 100px text-indent. This is a paragraph with 100px text-indent.</p>
</body>
</html>

text-indent in Percentage

In the following example, we set the text-indent of paragraph with 20%. Since, the parent of this paragraph is div, 20% of the div’s width is set as paragraph’s indentation.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #div1 {
            border: 1px solid blue;
            width: 400px;
        }
        #p1 {
            border: 1px solid red;
            text-indent: 20%;
        }
    </style>
</head>
<body>
    <div id="div1">
        <p id="p1">This is a paragraph with 20% text-indent. This is a paragraph with 20% text-indent. This is a paragraph with 20% text-indent. This is a paragraph with 20% text-indent.</p>
    </div>
</body>
</html>

Conclusion

In this CSS Tutorial, we learned about text-indent property, and how to use this property for HTML Elements, with examples.