Doppelte Überschriften mit Negativ Margin formatieren

Der Tag <h?> erzeugt die Überschriften in einem HTML-Dokument. An die Stelle des Platzhalters “?” kommt dann eine Zahl zwischen eins und sechs, welche die Ebene der Überschrift angeben soll. Diese Elemente benutzt man innerhalb einer Website ausschließlich in einer hierarchischen Reihenfolge und ohne eine Stufe zu überspringen. Das heißt, die oberste Überschrift ist mit h1, Unterkapitel mit h2, deren Unterkapitel mit h3 usw. zu bezeichnen (h1 – h2 – h3 – h4 – h5 – h6).

Die Formatierung dieser Auszeichnungen (Schriftgröße, Abstände usw.) erfolgt mit Hilfe von CSS. Nun kann es vorkommen, dass zwei Überschriften direkt hintereinander folgen. Im Ergebnis kumulieren sich die definierten Abstände und wirken viel zu groß.

Hintereinander folgende Überschriften

Gibt es eine Möglichkeit nur die Abstände für zwei bestimmte h-Elemente zu definieren?

Die im Buch auf Seite 38 angesprochene Selektor-Gruppierung hilft in diesem Fall nicht weiter, da sie lediglich das mehrfache Schreiben einer Regel erspart. Lösen lässt sich das Problem mit folgendem Trick:

1
2
3
h1 + h2 {
margin-top: -1em;
}

Diese Regel spricht nun alle <h2></h2> Tags an, die unmittelbar auf einen <h1></h1> Tag folgen. Der Eigenschaft margin (Außenabstand) wurde ein negativer Wert zugewiesen. Das führt dazu, dass die Überschrift Ebene 2 nach oben ausweicht, und zwar in den Bereich margin der Überschrift Ebene 1. Das optisch gewünschte Ergebnis ist eingetreten.

Hintereinander folgende Überschriften mit CSS formatiert

Beachten Sie aber, dass nur margin negative Werte erlaubt. Die beiden anderen Mitspieler des Box-Modells, padding und border, können nur positive Werte annehmen!

Über Jens Kilgenstein

Ich bin seit über zehn Jahren im Bereich Webdesign tätig und betreue seitdem kleine und große Kunden bei der Konzeption und Umsetzung von Webprojekten. → Zum Profil

Ebenfalls Lesenswert:

Bisher keine Kommentare.

Hinterlasse eine Antwort