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.

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

© 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 lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.