Erstzeileneinzug auf Websites

In Büchern wird häufig die erste Zeile eines Kapitels etwas eingerückt begonnen. In Schreibprogrammen wie z.B. Word gibt es hierfür den Erstzeileneinzug. Auch auf Websites kann man die erste Zeile einrücken lassen.

Für den Erstzeileneinzug auf Websites kann man in CSS die Eigenschaft text-indent verwenden. Mit einer Längenangabe oder in Prozent wird damit die 1. Zeile eingerückt. Anhand eines Beispiels ist nachfolgend die Syntax abgebildet.

Werte für text-indent

Für text-indent kann man die folgenden Werte angeben.

Numerische Werte mit Einheit

<Zahl>px (Pixel)
<Zahl>% (Prozent, bezieht sich auf die Breite des Elternelements)
<Zahl>em (relative Schriftgröße des Elternelements, beginnend vom Standard des Geräts)
<Zahl>rem (1rem entspricht der Größe, die für das Wurzelelement html gilt)
<Zahl>ex (1ex entspricht der Größe des Kleinbuchstabens x, falls es definiert wurde, ansonsten 0.5em)
<Zahl>ch (1ch entspricht der Breite der Ziffer 0, falls es definiert wurde, ansonsten Durchschnittsbreite aller Zeichen)
<Zahl>vw (1vw entspricht 1% der Anzeigebreite)
<Zahl>vh (1vh entspricht 1% der Anzeigehöhe)
<Zahl>vmin (der kleinere Wert von vw oder vh)
<Zahl>vmax (der größere Wert von vw oder vh)
<Zahl>pt (Punkt)
<Zahl>pc (Pica)
<Zahl>in (Inch)
<Zahl>mm (Millimeter)
<Zahl>cm (Zentimeter)

Keyword-Werte

normal (Standardwert, normaler Abstand)
initial (Setzt auf den Standardwert)
inherit (Vererbt vom Elternelement)

Nachfolgend ist ein Beispielcode sowie die Abbildung von der Browserdarstellung.

.selektor1 {
text-indent: 40px;
}

.selektor2 {
text-indent: 60px;
}

.selektor3 {
text-indent: 80px;
}

p {
margin: 2px;
padding: 5px;
width: 400px;
font-size: 24px;
height: 60px;
border: 1px solid #001055;
}

<p class="selektor1">Text in einem Absatz, in dem die erste Zeile 40px eingerückt ist.</p>
<p class="selektor2">Text in einem Absatz, in dem die erste Zeile 60px eingerückt ist.</p>
<p class="selektor3">Text in einem Absatz, in dem die erste Zeile 80px eingerückt ist.</p>

Bei text-indent sind auch negative Werte möglich, sodass die erste Zeile in die andere Richtung verschoben wird. Die Eigenschaft gibt es bereits sehr lange, weshalb die Umsetzung in den gängigen Browsern ganz gut funktioniert.