Text-indent

Contact Us or call 1-877-932-8228
Text-indent

Text-indent

The text-indent property is used to indent (or outdent) the first line of a block of text. The value can be specified in number of units or in percentage of the width of the containing block.

The following code sample shows the effects of text-align, text-decoration, and text-indent:

Code Sample:

CssText/Demos/AlignDecorationAndIndent.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Text-Align, Text-Decoration and Text-Indent</title>
</head>
<body>
<h1>Text-Align, Text-Decoration and Text-Indent</h1>
<h2>Text-Align</h2>
<div style="text-align: left;">text-align:left</div>
<div style="text-align: center;">text-align:center</div>
<div style="text-align: right;">text-align:right</div>
<div style="text-align: justify;">
	text-align:justify - to see the effect of justify, 
		the text block has to wrap
	text-align:justify - to see the effect of justify, 
		the text block has to wrap
	text-align:justify - to see the effect of justify, 
		the text block has to wrap
</div>

<h2>Text-Decoration</h2>
<div style="text-decoration: none;">text-decoration:none</div>
<div style="text-decoration: overline;">text-decoration:overline</div>
<div style="text-decoration: underline;">text-decoration:underline</div>
<div style="text-decoration: blink;">text-decoration:blink</div>
<div style="text-decoration: line-through;">text-decoration:line-through</div>
<div><a href="http://www.webucator.com" 
		style="text-decoration: none;">Webucator</a></div>

<h2>Text-Indent</h2>
<div style="text-indent: 50px;">
	text-indent:50px - text-indent only applies to the first line of text.<br>
	The next lines will not be indented.
</div>
<div style="text-indent: 10%;">
	text-indent:10% - text-indent only applies to the first line of text.<br>
	The next lines will not be indented.
</div>

</body>
</html>

The above code will render the following:Text Alignment, Decoration, and Indentation

Next