CSS text-indent Property

The text-indent property in CSS is used to specify the indentation of the first line of text in a block or paragraph. It helps create organized and visually appealing text layouts.

Allows positive values to indent the first line toward the right side.
Supports negative values, which indent the first line toward the left side.
Commonly used in paragraphs, articles, and documents to improve readability and formatting.

Syntax:

text-indent: length | initial | inherit;

Property values:

length: It is used to set fixed indentation in terms of px, pt, cm, em etc. The default value of length is 0.
percentage (%): It is used to define the indentation in % as compared to the width of the element.
initial: It is used to set text-indent property to its default value.

Example: Here, we are using text-indent: length; property.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS text-indent Property
    </title>

    <!-- CSS text-indent property -->
    <style>
        .sudo {
            text-indent: 70px;
        }

        .geeks {
            text-indent: -5em;
        }

        .gfg {
            text-indent: 40%;
        }
    </style>
</head>

<body>
    <h1 style="">GeeksforGeeks</h1>
    <h2> text-indent Property</h2>

    <h2>text-indent: 70px:</h2>
    <div class="sudo">
        Prepare for the Recruitment drive of product
        based companies like Microsoft, Amazon, Adobe
        etc with a free online placement preparation
        course. The course focuses on various MCQ's
        & Coding question likely to be asked in the
        interviews & make your upcoming placement
        season efficient and successful.
    </div>

    <h2>text-indent: -5em:</h2>
    <div class="geeks">
        Prepare for the Recruitment drive of product
        based companies like Microsoft, Amazon, Adobe
        etc with a free online placement preparation
        course. The course focuses on various MCQ's
        & Coding question likely to be asked in the
        interviews & make your upcoming placement
        season efficient and successful.
    </div>

    <h2>text-indent: 40%:</h2>
    <div class="gfg">
        Prepare for the Recruitment drive of product
        based companies like Microsoft, Amazon, Adobe
        etc with a free online placement preparation
        course. The course focuses on various MCQ's
        & Coding question likely to be asked in the
        interviews & make your upcoming placement
        season efficient and successful.
    </div>

</body>

</html>

Example: Here, we are using text-indent: %; property.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS text-indent Property
    </title>

    <!-- CSS text-indent property -->
    <style>
        .gfg {
            text-indent: 40%;
        }
    </style>
</head>

<body>
    <h1 style="">GeeksforGeeks</h1>
    <h2> text-indent Property</h2>

    <h2>text-indent: 40%:</h2>
    <div class="gfg">
        Prepare for the Recruitment drive of product
        based companies like Microsoft, Amazon, Adobe
        etc with a free online placement preparation
        course. The course focuses on various MCQ's
        & Coding question likely to be asked in the
        interviews & make your upcoming placement
        season efficient and successful.
    </div>

</body>

</html>

Example: Here, we are using text-indent: initial; property.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS text-indent Property
    </title>

    <!-- CSS text-indent property -->
    <style>
        .gfg {
            text-indent: initial;
        }
    </style>
</head>

<body>
    <h1 style="">GeeksforGeeks</h1>
    <h2> text-indent Property</h2>

    <h2>text-indent: initial:</h2>
    <div class="gfg">
        Prepare for the Recruitment drive of product
        based companies like Microsoft, Amazon, Adobe
        etc with a free online placement preparation
        course. The course focuses on various MCQ's
        & Coding question likely to be asked in the
        interviews & make your upcoming placement
        season efficient and successful.
    </div>

</body>

</html>

CSS text-indent Property

Explore