CSS textindent Property (original) (raw)

CSS text-indent Property

Last Updated : 28 May, 2026

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 `

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

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

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

GeeksforGeeks

text-indent Property

<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>

`

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

html `

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

GeeksforGeeks

text-indent Property

<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>

`

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

html `

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

GeeksforGeeks

text-indent Property

<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>

`