Set text-indent to 10% in HTML and CSS

Description

The following code shows how to set text-indent to 10%.

Example


<!-- w w  w .  j a  va  2s . c  o  m-->
<html>
<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>

Click to view the demo

The code above generates the following result.

Home »
  HTML CSS Tutorial »
    Text »
      CSS Text Style

...
Set font size and color for 'first-letter' ...
Set font size and color for 'first-line' in...
Set negative text indent for list item in H...
Set paragraph to text-indent 3em in HTML an...

Set text-indent to 10% in HTML and CSS