CSS text-indent für den Texteinzug

Einzug: mit CSS den Einzug gestalten

Normalerweise beginnt ein Absatz auf gleiche Weise wie die folgenden Zeilen, aber es kann ein gewünschtes Stilmittel sein, dass man die erste Zeile einrückt. Manchmal will man damit einen bestimmten Absatz hervorheben, manchmal eine Erzählung durch eingerückte Absätze besser und nachvollziehbarer strukturieren.

Die Veränderung des Texteinzuges kann damit ein Stilmittel sein, man sollte damit aber auch sparsam umgehen und die Lesbarkeit des Textes nicht aus den Augen verlieren.

Texteinzug mit CSS und text-indent regulieren

Der CSS-Befehl text-indent bietet die Gelegenheit, einen Absatz mit einem Einzug zu versehen. Arbeitet man mit einer zentralen CSS-Datei, so kann man alle Absätze mit einem solchen Einzug ausstatten. text-indent kann aber noch mehr. Denn es ist möglich, negative Werte einzusetzen, wodurch ein ungewöhnlicher Effekt erzielt wird, denn die erste Zeile wird nicht eingerückt, sonder ausgerückt. Ein Stilmittel, das selten vorzufinden ist.

Anwendungsbeispiele:

p { text-indent: 10px; }
p { text-indent: -5px; }

Im ersten Fall wird die erste Zeile um 10 Pixel eingerückt, im zweiten Fall um 5 Pixel ausgerückt.

ergibt:

text-indent: 30px;
Normale Zeile

text-indent: -30px;
Normale Zeile

Inwieweit der negative Texteinzug überhaupt möglich sein kann, hängt von den generellen Einstellungen des Textes ab. Der verstärkte Einzug nach rechts kann sehr wohl ein Mittel sein, wenn man etwa in einem Informationstext eine Aussage stärker einrückt als den Rest des Textes und so für mehr Aufmerksamkeit sorgt.

Lesen Sie auch

Mit CSS lassen sich die Texte sehr schön formatieren und man kann die gesamte Seite mit den Abständen und den Textfluss aufbauen, aber es geht noch mehr. Eine wichtige Thematik ist die Absatzformatierung, bei der vertikale und horizontale Ausrichtung ebenso möglich ist wie auch der Zeilenumbruch und damit bewusst kürzere Zeilenlängen oder die Zeilenhöhe.

Das nächste Thema bei den Formatierungen mit CSS betrifft den Rahmen. Der Rahmen ist häufig ein optisches Werkzeug, um Inhalt hervorzuheben oder zu strukturieren und man kann in CSS viele Formatierungen wählen wie der Typ der Linie, die Farbe oder auch die Rahmenstärke.

Ebenfalls interessant sind die Gestaltungsmöglichkeiten bei den Listen. Sie können bei den Abständen individuell eingestellt werden und man kann bei der ungeordneten Liste sogar ein eigenes Bild als Aufzählungszeichen wählen.

Diesen Artikel teilen

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel