Wundermittel für CSS

CSS: Profi-Tipps und Tricks - Negative Margins

Negative Margin-Werte sind ein wahres CSS-Wundermittel - sie ermöglichen Layouts mit freier Quellcode- Anordnung, helfen bei der Zentrierung von Elementen oder bei diversen Fußzeilen-Problemen.

CSS: Profi-Tipps&Tricks

© Archiv

CSS: Profi-Tipps&Tricks

Im Gegensatz zu padding und border, die nur positive Werte annehmen können, darf man beim Außenabstand von Elementen (margin) auch negative Werte angeben.

Wie sich das auswirkt, hängt davon ab, ob es sich um statische, positionierte oder gefloatete Elemente handelt. Beginnen wir mit statischen Elementen und mehreren divs:

<div>Eins ...</div><div>Zwei ...</div><div>Drei ...</div><div>Vier ...</div>

Sie sollen 30px Abstand zueinander haben:

div { margin: 30px; }

Da vertikale Margins zusammenfallen, das heißt, zwei aufeinandertreffende Margins nicht addiert werden, beträgt der Abstand zwischen allen Elementen 30px.

Möchte man jetzt den Abstand der beiden letzten div-Container zueinander verringern, muss man für das entsprechende Element zuerst eine Klasse definieren:

<div>Eins ...</div><div>Zwei ...</div><div>Drei ...</div><div class="naeher">Vier ...</div>

Um den Abstand des Elements der Klasse .naeher nach oben nicht auf 30px, sondern auf 10px zu setzen, versuchen wir:

.naeher { margin-top: 10px; }

Damit ist der obere Margin auf 10px festgelegt. Dies hat jedoch aufgrund der zusammenfallenden Margins keinerlei Auswirkung: Der Abstand bleibt 30px. Man konnte beim dritten div ebenfalls eine Klasse definieren und einen unteren Abstand von 10px festlegen. Einfacher geht es aber durch die Angabe eines negativen Wertes, von .-20px:

CSS: Profi-Tipps&Tricks

© Archiv

Der Abstand zwischen Box drei und vier wird über negative Margins verringert.
.naeher { margin-top: -20px; }

Dadurch wird das Element mit der Klasse .naeher um 20px näher an das obere Element herangeschoben, sodass der Abstand die gewünschten 10px beträgt, nach der simplen Rechnung 30px - 20px = 10px.

Das heißt: Ein positiver Margin schiebt ein Element von einem anderen Element weg, ein negativer bewegt es in die entsprechende Richtung. Durch negative Margins kann man aber nicht nur den Außenabstand zwischen zwei Elementen verkleinern, sondern auch Überlappungen herbeiführen, also ein Element über ein anderes positionieren:

<div style="margin-bottom: 0px">...</div><div style="margin-top: -10px">...</div>

Übrigens gilt das Prinzip der Collapsing Margins - dass also vertikale Außenabstände zusammenfallen - auch bei negativen Außenabständen. Im folgenden Fall hat der erste Bereich einen unteren Margin von -10px und der zweite einen oberen Margin von -10px. Diese werden als ein Margin behandelt. Daher ist die Überschneidung 10px und nicht etwa 20px breit.

<div style="margin-bottom: -10px">
...</div><div style="margin-top: -10px">...</div>

Verschachtelte Elemente

Ein anderes Beispiel: ein div-Element, in dem sich weitere Elemente befinden.

<div><p class="negative">...</p><p>...</p></div>

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".