HTML or CSS Text Indent Property

Ad Banner Image

CSS Text Indent Property

CSS Text Indent is a property which is used to define how the first line of the HTML Text Elements contains have space from the left corner.

You can define text-indent property by apply in values in percentage, in pixels, in em and many more.

Example 1 – CSS Indent Property application to shift text from left.

<!DOCTYPE html>
<html>
  <head>
	<style>
	  div.a 
	  {
	    text-indent: 60px;
		text-align:justify;
	  }

	  div.b 
	  {
		text-indent: 3em;
		text-align:justify;
	  }

	  div.c 
	  {
		text-indent: 50%;
		text-align:justify;
	  }
	</style>
  </head>
  
  <body>
		<h1>Text Indent Example</h1>
	<div class="a">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	</div>
		
	<div class="b">
	<p>Lorem ipsum aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
	</div>
		
	<div class="c">
	<p>Lorem ipsum aliquam etiam erat velit scelerisque in dictum non. Tincidunt ornare massa eget egestas purus. Lacus luctus accumsan tortor posuere ac ut.</p>
	</div>
  </body>
</html>

In the above code, we define the text-indent property how it work and how the textr will show.

CSS Text Indent Property Example Code and Syntax
Fig.1 – CSS Text Indent Property Example Code and Syntax

Note:You can specify negative values to the text-indent CSS Properties. If you specify negative value to the text-indent property than the first line is started from the more left side than the normal body of the left.

HTML Text Indent

Another example of a text-indent property which is specified in the negative value.

Example 2 – Property application and code example to shift text to the left from base position

<!DOCTYPE html>
<html>
  <head>
	<style>
	  div.a 
	  {
	    text-indent: -10px;
		text-align:justify;
	  }

	  div.b 
	  {
		text-indent: -2em;
		text-align:justify;
	  }

	  div.c 
	  {
		text-indent: -15%;
		text-align:justify;
	  }
	</style>
  </head>
  
  <body>
		<h1>Text Indent Example</h1>
	<div class="a">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	</div>
		
	<div class="b">
	<p>Lorem ipsum aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
	</div>
		
	<div class="c">
	<p>Lorem ipsum aliquam etiam erat velit scelerisque in dictum non. Tincidunt ornare massa eget egestas purus. Lacus luctus accumsan tortor posuere ac ut.</p>
	</div>
  </body>
</html>

In the above code, we define the text-indent property but the values are negative so you have to check in below screenshot that how the HTML Element will be shown.

HTML Text Indent with negative value of Property
Fig.2 – HTML Text Indent with negative value of Property
Sponsor Banner
You can leave a response, or trackback from your own site.
Leave a Reply to the article


Learn CSS

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!

Powered by Wordpress