Texteinzug

Mit der Eigenschaft text-indent können Sie den Anfang der ersten Textzeile um ein bestimmtes Leerzeichen versetzen. Es ist sehr einfach zu bedienen, wie in diesem Beispiel dargestellt:

<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>

In diesem ersten Beispiel wurde ein absoluter Wert verwendet. Insbesondere, wenn Sie bereits eine relative Schriftgrößeneinheit wie die Einheit em verwenden, ist es sinnvoll, den Texteinzug in derselben Einheit anzugeben:

<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>

Sie können auch einen prozentbasierten Texteinzug verwenden. In diesem Fall wird der Versatz basierend auf der Breite des übergeordneten Elements berechnet:

<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>

Zusammenfassung

Mit der Eigenschaft text-indent erhalten Sie auf einfache Weise den coolen Einzug in der ersten Zeile, den viele Zeitschriften und Zeitungen seit Jahrhunderten verwenden.