Which property is used to indent the text of a paragraph ?

Last Updated : 01 Jun, 2022

In this article, we will see the property that is used to indent the text of a paragraph. The text-indent property in CSS is used to define the indentation of the first line in each block of text. It also takes negative values. It means if the value is negative then the first line will be indented to the left.

Syntax:

text-indent: length|initial|inherit;

Example 1: The following example demonstrates the text-indent property with length and percentage values.

HTML

<!DOCTYPE html> 
<html> 
<head>         
    <!-- CSS text-indent property -->
    <style> 
        .textIndent1  
        { 
            text-indent: 70px; 
        } 
              
        .textIndent2  
        { 
            text-indent: -5em; 
        } 
              
        .textIndent3 
        { 
            text-indent: 40%; 
        } 
    </style> 
</head> 
      
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h2> text-indent Property</h2> 
          
    <h3>text-indent: 70px:</h3> 
    <div class="textIndent1"> 
        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> 
          
    <h3>text-indent: -5em:</h3> 
    <div class="textIndent2"> 
        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> 
          
    <h3>text-indent: 40%:</h3> 
    <div class="textIndent3"> 
        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>                     

Output:

Example 2: This example demonstrates the text-indent property. Here we used to set the text-indent property to its default value.

HTML

<!DOCTYPE html> 
<html> 
<head>         
    <!-- CSS text-indent property -->
    <style> 
        .divClass 
        { 
            text-indent: initial; 
        } 
    </style> 
</head> 
      
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h2> text-indent Property</h2> 
          
    <h3>text-indent: initial</h3> 
    <div class = "divClass"> 
        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>                     