CSS text-indent – erste Textzeile einrücken

Die CSS-Anweisung text-indent verschiebt einen Text in der ersten Zeile eines Absatzes. Man spricht auch einrücken (wenn er nach rechts verschoben wird) bzw. von ausrücken (wenn der Text nach links verschoben wird).

Die Bedeutung im Englischen von „indent“ ist „Einzug“ im Bereich von Text und Typografie. Damit wird der Leerraum am Anfang der ersten Absatzzeile beschrieben.

Bei Textverarbeitungsprogramm wie Word und Open Office spricht man hier von „hängender Einzug“ bzw. „hängender Absatz“.

Sinn und Zweck von Text einrücken und text-indent

Die Einrückung von Text wird gerne in Büchern verwendet, was den Vorteil hat, dass man auf einen Blick einen Absatz erkennt. Zeitschriften verwenden gerne den Effekt – und wer darauf achtet, sieht dann, dass es bei allen Absätzen geschieht, nur nicht beim ersten Absatz nach Überschriften. Also alle Absätze, die auf Absätze folgenden (wichtig für die CSS-Regel). Auch in AGB sieht man das in vielen Fällen.

Größe/Einrückweite des Einzugs

Die Einrückweite des Einzugs wird gerne nach Schrittgröße gesetzt. Bei Typografen ist die Breite von einem Geviert üblich (siehe die relative Größe „em“).

Wie rücken wir Text über CSS ein?

Die CSS-Anweisung text-indent benötigt eine Breitenangabe. Diese Breitenangabe kann absolut in Pixel erfolgen wie auch relativ über Prozent oder „em“ und „en“. Für Webdesign sind relative Angaben sinnvoll!

Aufbau CSS-Anweisung text-indent

p { text-indent: 1em; }

Der Wert kann auch negativ angegeben werden. Dadurch wird aus unserem Einzug ein Auszug. Der Zeilenanfang rutsch weiter nach Links als die folgenden Zeilen.

Typisch für Zeitschriften: nicht der erste Absatz mit text-indent

Möchte man nun das für Zeitschriften typische Erscheinungsbild umsetzen, dass nur dem ersten Ansatz folgenden Absätze eingerückt werden, dann ist das sehr einfach über den Nachfolgeselektor „+“ in CSS möglich:

p + p { text-indent: 1em; }

Als Ergebnis erhalten wir (die Absätze haben nur eine Breite von 20em, um den Effekt gut zeigen zu können):