Text:
Text Indent
By using the text-indent property, you can offset the start of the first line of text with a certain amount of whitespace. It's very easy to use, as illustrated by this example:
<style type="text/css">
p {
text-indent: 50px;
width: 200px;
background-color: Silver;
}
</style>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed condimentum augue sed diam semper rhoncus.
Curabitur porttitor mattis tortor, eget aliquam lectus porta ac.
</p>
This first example used an absolute value, but especially if you're already using a relative font size unit like the em unit, specifying the text-indent in the same unit makes sense:
<style type="text/css">
p {
font-size: 1em;
text-indent: 2.5em;
width: 200px;
background-color: Silver;
}
</style>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed condimentum augue sed diam semper rhoncus.
Curabitur porttitor mattis tortor, eget aliquam lectus porta ac.
</p>
You can also use a percentage-based text-indent. In that case, the offset will be calculated based on the width of the parent element:
<style type="text/css">
.box {
width: 200px;
background-color: Silver;
}
p {
text-indent: 50%;
}
</style>
<div class="box">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed condimentum augue sed diam semper rhoncus.
Curabitur porttitor mattis tortor, eget aliquam lectus porta ac.
</p>
</div>
Summary
The text-indent property will easily give you that cool, first line indentation that many magazines and newspapers have been using for centuries.
This article has been fully translated into the following languages:
Is your preferred language not on the list? Click here to help us translate this article into your language!