CSS text-indent

This CSS 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 text.

It allows the negative values, and if any negative value is defined, then the indentation of the first line will be towards left.

Syntax

This property has the value length, but here, we will discuss its experimental values.

Values

length: This value sets the fix indentation with the units cm, pt, em, px, and others. Its default value is 0. It allows negative values. The indentation of the first line is on the left when its value is negative.

percentage: It specifies the amount in space in the percentage of the width of the containing block.

initial: It sets the property to its default value.

This CSS property has two experimental values, which are discussed as follows. These two following values are not supported in browsers.

hanging: It is unofficial and experimental value. It inverts the indented lines. It indents each line except the first. Usually, bibliographies are written with the hanging indents, in which the first line is with the left-hand margin, and the rest of the content is indented.

each-line: It is also an experimental value. It affects every line, including the first line after a forced line break (using <br>).

Example

In this example, we are using the text-indent property with the length values in px, em, and cm. We are also applying the text-align: justify; property in order to see the better results.

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            CSS text-indent Property 
        </title> 
        <style> 
		div{
		font-size: 20px;
		width: 500px;
		height:200px;
		text-align: justify;
		}
            .jtppx { 
                text-indent: 100px; 
            } 
              
            .jtpem { 
                text-indent: -5em; 
            }
			
            .jtpcm { 
                text-indent: 7cm; 
            } 
			
        </style> 
    </head> 
      
    <body> 
	<center>
        <h1>Example of text-indent Property</h1> 
          
        <h2>text-indent: 70px;</h2> 
        <div class = "jtppx"> 
            Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
        </div> 
          
        <h2>text-indent: -5em;</h2> 
        <div class = "jtpem"> 
            Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
        </div> 
        <h2>text-indent: 7cm;</h2> 
        <div class = "jtpcm"> 
            Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
        </div> 
		</center>
      
    </body> 
</html>

Test it Now

Let's see another 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;
		}
            .jtpper { 
                text-indent: 65%; 
            } 
             
        </style> 
    </head> 
      
    <body> 
	<center>
        <h1>Example of text-indent Property</h1> 
          
        <h2>text-indent: 65%;</h2> 
        <div class = "jtpper"> 
            Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
        </div> 
          
</center>
      
    </body> 
</html>

Test it Now

Next TopicCSS text-stroke

← prev next →