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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…