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.

<PreviousNext>
^ Back to Top