text-indent: 10%;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<title>text-indent</title>
<style type='text/css'>
body {
font: 14px sans-serif;
}
p {
padding: 5px 25px;
}
p#indent {
text-indent: 25px;
}
p#indent-percentage {
text-indent: 10%;
}
p#indent-reverse {
text-indent: -25px;
}
p.indent-example {
background: lightyellow;
border: 1px solid darkkhaki;
}
</style>
</head>
<body>
<h4>Indenting Text With CSS</h4>
<p>
Text can be indented by a positive length value, as is demonstrated
by the following paragraph.
</p>
<p class='indent-example' id='indent'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
</p>
<p>
Text can be indented via a percentage value, as is demonstrated
by the following paragraph.
</p>
<p class='indent-example' id='indent-percentage'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
</p>
<p>
Finally, text can be reverse indented by providing a negative
length value, which is demonstrated by the following paragraph.
</p>
<p class='indent-example' id='indent-reverse'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
</p>
</body>
</html>
Related examples in the same category