Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

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

Absatz eins Absatz eins Absatz eins Absatz eins Absatz eins Absatz eins Absatz eins Absatz eins Absatz eins Absatz eins Absatz eins

Absatz zwei Absatz zwei Absatz zwei Absatz zwei Absatz zwei Absatz zwei Absatz zwei Absatz zwei Absatz zwei Absatz zwei Absatz zwei

Absatz drei Absatz drei Absatz drei Absatz drei Absatz drei Absatz drei Absatz drei Absatz drei Absatz drei Absatz drei Absatz drei

Weiterempfehlen • Social Bookmarks • Vielen Dank

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Vielen Dank für Ihre Hilfe

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details