Text-indent

The text-indent CSS property specifies how much horizontal space should be left before the beginning of the first line of the text content of an element.

The text-indent only applies to the first line of text in the element.

We also can use negative values .

CSS Syntax

text-indent: length | initial | inherit;

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
      <style>
        p {
          text-indent: 20%;
         }
      </style>
   </head>
   <body>
        
        <p>This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property.</p>

   </body>
</html>

Let's see an example CSS length (px, em):

<!DOCTYPE html>
<html>
   <head>
      <style>
        p {
          text-indent: 100px;
         }
      </style>
   </head>
   <body>
        
        <p>This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property.</p>

   </body>
</html>

Property Values

Value Descriptions
length Determines a fixed indentation in px, pt, cm, em, etc. The default value is 0.
% Determines the indentation in % of the width of the parent element
initial It makes the property use its default value.
inherit It inherits the property from its parents element.