CSS: Profi-Tipps und Tricks - Negative Margins

1. CSS: Profi-Tipps und Tricks - Negative Margins
2. Teil 2: CSS: Profi-Tipps und Tricks - Negative Margins
3. Teil 3: CSS: Profi-Tipps und Tricks - Negative Margins
4. Teil 4: CSS: Profi-Tipps und Tricks - Negative Margins
5. Teil 5: CSS: Profi-Tipps und Tricks - Negative Margins
6. Teil 6: CSS: Profi-Tipps und Tricks - Negative Margins
7. Teil 7: CSS: Profi-Tipps und Tricks - Negative Margins
8. Teil 8: CSS: Profi-Tipps und Tricks - Negative Margins

© Archiv

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

.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>