How do I control the indentation of text?
Author: Deron Eriksson
Description: This CSS example shows how to control the indentation of text using the text-indent property.
Tutorial created using: Windows XP


In CSSW, the indendation of text can be controlled with the text-indent property. The values of the amount of indentation can be controlled using standard CSS length and percentage values. In addition, the text-indent property of an element can be set to inherit, meaning that it inherits the value of the text-indent property from its parent. The style-test.html page below illustrates four indentation examples. The first block of text has no indentation. The next block has an indentation of 3em, the next has an indentation of 15px, and the last has an indentation of 10%.

style-test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test</title>
<style type="text/css">
div { background-color: aqua; border: 1px solid;}
div.indent1 { text-indent: 3em; }
div.indent2 { text-indent: 15px; }
div.indent3 { text-indent: 10%; }
</style>
</head>
<body>
<div>
<div>Here is some text that is not indented</div>
<div class="indent1">Here is some text that is indented 3em</div>
<div class="indent2">Here is some text that is indented 15px</div>
<div class="indent3">Here is some text that is indented 10%</div>
</div>
</body>
</html>

The display of style-test.html in IE7 is shown below.

indendation example

If you resize the browser window for style-test.html, the indentations stay fixed for the text-indent values that are lengths. The indentation of the text in the block that features the text-indent with the percentage value increases or decreases with increasing or decreasing the width of the browser window.