CSS text-indent

This CSS text-indent property sets the indentation of the first line in a block of text. It specifies the amount of horizontal space that puts before the lines of content.

Values:

length
percentage
initial
hanging
each-line

Example:

The length values in px, em, and cm.

<!DOCTYPE html>
<html>
  <head>
    <title>
      CSS text-indent Property
    </title>
    <style>
              div{
              font-size: 20px;
              width: 500px;
              height:200px;
              text-align: justify;
              }
      .px {
        text-indent: 100px;
      }
      .em {
        text-indent: -5em;
      }

      .cm {
        text-indent: 7cm;
      }

    </style>
  </head>

  <body>
      <center>
    <h1>Example of text-indent Property</h1>

    <h2>text-indent: 70px;</h2>
    <div class = "px">
     Enter content here...........................//////////////////,,,,,,,,,,
    </div>

    <h2>text-indent: -5em;</h2>
    <div class = "em">
     Enter content here...........................//////////////////,,,,,,,,,,
    </div>
    <h2>text-indent: 7cm;</h2>
    <div class = "cm">
     Enter content here...........................//////////////////,,,,,,,,,,
    </div>
             </center>

  </body>
</html>

OUTPUT:

Demonstration using the percentage values:

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>
      CSS text-indent Property
    </title>
     <style>
              div{
              font-size: 20px;
              width: 500px;
              height:200px;
              text-align: justify;
              }
      .per {
        text-indent: 65%;
      }

     </style>
   </head>

   <body>
       <center>
     <h1>Example of text-indent Property</h1>

     <h2>text-indent: 65%;</h2>
     <div class = "per">
      Welcome to the I2TUTORIALS enter content hera.........
     </div>

</center>

  </body>
</html>

OUPTUT: