CSS text-indent

The CSS text-indent property is used to define the indentation (basically the starting position) of first line of text. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .myp{text-indent: 22px;}
   </style>
</head>
<body>
   
   <div>
      <h2>The text-indent Property</h2>
      <p>This an example of text-indent property in CSS.</p>
      <p class="myp">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius perspiciatis
         alias nulla laudantium iusto, labore aut fugit sapiente? Excepturi minima
         iste qui aut harum, sunt delectus sed ullam fuga enim? Lorem, ipsum dolor.
         Lorem ipsum dolor sit amet consectetur adipisicing.</p>
   </div>
   
</body>
</html>

Output

The text-indent Property

This an example of text-indent property in CSS.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius perspiciatis alias nulla laudantium iusto, labore aut fugit sapiente? Excepturi minima iste qui aut harum, sunt delectus sed ullam fuga enim? Lorem, ipsum dolor. Lorem ipsum dolor sit amet consectetur adipisicing.

Note - Giving negative value to text-indent property, positioned the first line to the left, from normal starting position.

CSS text-indent Syntax

The syntax of text-indent property in CSS, is:

text-indent: x;

The value of x should be any of the following:

length - used to define custom and fixed indentation. The default value is 0
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS text-indent Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{border: 2px solid chocolate; margin-bottom: 18px;}
      .b p{text-indent: 2cm;}
      .c p{text-indent: 50%;}
   </style>
</head>
<body>
   
   <div class="a">
      <h2>Without text-indent</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis,
         beatae doloremque deleniti quibusdam maiores vitae consequatur odit
         explicabo, sed provident repellendus quos, reprehenderit vel laborum
         atque! Architecto veniam nemo iure culpa optio?</p>
   </div>

   <div class="b">
      <h2>text-indent: 2cm</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis,
         beatae doloremque deleniti quibusdam maiores vitae consequatur odit
         explicabo, sed provident repellendus quos, reprehenderit vel laborum
         atque! Architecto veniam nemo iure culpa optio?</p>
   </div>

   <div class="c">
      <h2>text-indent: 50%</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis,
         beatae doloremque deleniti quibusdam maiores vitae consequatur odit
         explicabo, sed provident repellendus quos, reprehenderit vel laborum
         atque! Architecto veniam nemo iure culpa optio?</p>
   </div>
   
</body>
</html>

Output

Without text-indent

Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis, beatae doloremque deleniti quibusdam maiores vitae consequatur odit explicabo, sed provident repellendus quos, reprehenderit vel laborum atque! Architecto veniam nemo iure culpa optio?

text-indent: 2cm

text-indent: 50%

CSS Online Test

« Previous Tutorial Next Tutorial »