….sind ein wichtiges CSS-Prinzip!
Collapsing Margins oder Zusammenfallende Ränder treten bei Elementen mit vertikal angrenzenden Margins auf. Der größere Abstand bleibt stehen, der Kleinere verschwindet.
Das ist oft ganz sinnvoll, damit sich z.B. bei mehreren Textabsätzen untereinander die Margins nicht zu unschönen Abständen aufaddieren.
Soweit ganz einfach. Leider ist es etwas komplizierter, was dazu führt, das der geneigte Webdesigner manchmal mit überraschenden Auswirkungen dieses Prinzips konfrontiert wird.
Margins erscheinen nicht da wo wir sie erwarten. Sie büxen aus und lassen sich ganz woanders nieder, oder sie fallen durch und sind scheinbar im Nirwana verschwunden.
Fangen wir aber mit dem einfachen Fall an und arbeiten uns dann langsam weiter vor
Hier findest du die collapsing-margins-anfang.htm zum Quelltext rauskopieren.
Im Browser schaut es momentan so aus:
Bitte CSS ergänzen:
p.erster-satz {margin-bottom:16px;}p.zweiter-satzmargin-top:32px;}
Ergebnis im Browser:
Das Ergebnis entspricht den Erwartungen. Der vertikale Abstand zwischen den Textabsätzen beträgt 32px.
Das könnt ihr ganz prima mit dem nützlichen Firefox-Addon MeasureIt nachmessen. 
Die Hauptüberschrift benötigt ein bißchen Abstand nach oben.
Bitte die margins der Textabsätze entfernen und CSS ergänzen:
h1 {margin-top:32px;}
Ergebnis im Browser:
So hatten wir uns das aber nicht vorgestellt! Das Margin büxt aus (manche sprechen auch von einem durchfallenden Margin) und läßt sich zwischen der Bildschirmoberkante und dem oberen Anfang von #umhang nieder.
Wir könnten padding statt margin nehmen, um das zu verhindern. Da das aber nicht immer wünschenswert oder möglich ist, versuchen wir das Margin mit einem Zaun (border!!) einzusperren.
Bitte CSS ergänzen:
#umhang {border:1px solid maroon;}
Ergebnis im Browser:
Mmmh, der Zaun ist an der falschen Stelle. Den Hintergrund von #umhang wollten wir nicht sehen.
Bitte den Rahmen von #umhang entfernen und CSS ergänzen:
#kopf {border:1px solid navy;}
Ergebnis im Browser:
So ist es richtig!
Jetzt wollen wir noch dem zweiten Textabsatz ein margin gönnen, damit es ringsum eine fett, grüne Umrandung bekommt.
Bitte CSS ergänzen:
p.zweiter-satz {margin:32px;}
Ergebnis im Browser:
Fast! An drei Seiten ist es okay, aber das untere Margin ist durchgeplumst.
padding ist nicht wünschenswert, weil wir ja die fette, grüne Umrandung des Inhaltscontainers brauchen. Deshalb setzen wir wieder einen Zaun, um das Durchplumsen des unteren margins zu verhindern
Bitte CSS ergänzen:
#inhalt {border:1px solid green;}
Ergebnis im Browser:
So soll es aussehen!
Das war noch nicht alles. Margins kann z.B. auch mit sich selbst kollabieren, oder durchfallen und kollabieren…und…und.
Neben padding und border ist auch ein Clearing geeignet, um Collapsing Margins zu verhindern.
Die Margins von Elementen mit overflow:auto/scroll/hidden kollabieren nicht mit ihren Nachfahren.
Die Margins von Elementen mit float:left/right; oder position:absolute/fixed; oder display:inline-block; kollabieren nicht mit ihren Nachfahren und auch nicht mit ihren Nachbarn.
Wenn ihr es ganz genau wissen wollt empfehle ich euch entweder das Studium des entsprechenden Absatzes der Spezifikation, oder ihr lest, was das Buch Fortgeschrittene CSS-Techniken dazu sagt.
Pingback: Collapsing Margins » KS Webdesign – Der Blog | Surfemotion-Blog
Pingback: Anonymous
Hallo Klaus,
ich bin heute auf ein CSS-”Problem” gestoßen als ich dem html-tag und dem body-tag jeweils eine eigene Hintergrundfarbe zugewiesen und innerhalb des bodys ein div mit margin-top erstellt habe.
Ich bin dem Problem dann auf den Grund gegangen und stieß dabei auf diesen Artikel hier. Hab dann um den body-tag einen border gemacht und somit den gewünschten Effekt erreicht.
Echt interessant, welche Rätsel CSS manchmal birgt…
Viele Grüße
Andy Bee
schön das dir der Artikel geholfen hat!
Hallo Klaus ! Zufällig bin ich auf der Suche bei einer Problemlösung auch hier auf dich gestossen , erst mal du hast eine schöne klare Seite auf der man sich super zurecht findet. Meine Frage als Ergänzung hier würde ich gerne wissen wie das in den verschiedenen Browsern aussieht. Ich habe bereits mehrmals das Problem gehabt das margings und paddings sich im firefox anders verhalten als in google chrome und meist auch im IE. Insbesondere wenn man Elemente hat die beides enthalten. Weisst du warum?
Danke Susanne
Hi Susanne,
uff, das hängt von so vielen Faktoren ab, dass man das so eigentlich nicht sagen kann.
Alsda wären z.B. :
Rendert der Browser im Quirksmodus?
Sowas mögen die Browser (besonders die IE`s) nicht. Da kann es dann zu den merkwürdigsten Fehldarstellungen kommen.
Gibt es einen CSS-Prolog?
Unterschiedliche Browser haben unterschiedlichen Default-Formatierungen. Wenn die nicht durch einen CSS-Prolog browserübergreifend vereinheitlicht werden kann es ebenfalls zu Darstellungsunterschieden kommen.
Der modern gewordene Einsatz von overflow:hidden; z.B. zum Einschließen von Floats, der auch in modernen Browser zu lustigen Fehldarstellungen führen kann. Das liegt u.a. daran weil die overflow-Eigenschaft in der Spezifikation etwas unscharf formuliert ist.
Ältere IE’s haben zuweilen eine ganz eigene Art CSS-Anweisungen umzusetzen. Da braucht es relativ viel spezifische Sonderwissen (durch Foren, google, etc. behebbar!) um dem zu begegnen.
Hallo Klaus Danke für die vielen Tipps, in diesem Fall ist es bei mit aussnahmsweise nicht der IE der Probleme macht sondern Google Chrome und Safari! Irgendwie wird da ein Abstand oder die Reaktion auf ein float anders kalkuliert wenn paddings und margins im Einsatz sind. Ich habe sehr viel gegoogelt ( so bin ich auch auf deine schöne Seite gestossen!) und es auf einer Seite geschafft das lösen mehr durch Zufall und auf eine andere lässt sich das leider nicht übertragen.
LG Susanne
mmh……wenn es Chrome und/oder Safari sind, klingt das fast ein bißchen nach overflow:hidden;. Bei diesen Browsern kommt es in dem Zusammenhang gerne mal zu Darstellungsproblemen.
Aber schön das du das Problem lösen konntest.
Hallo Klaus , ja mit dem overflow hidden das Problem hatte ich auch mal in meinem Fall war die Lösung am Ende nicht nur line-height sondern dazu auch noch height anzugeben, wobei height identisch mit line-height sein muss , dann sahs überall gleich aus. Hab das irgendwo gelesen und ausprobiert und es hat funktioniert. Hat aber lange gedauert.
Dein Blog ist klasse! Hab schon viel tolle Sachen hier gefunden . Dank dir auch für die privaten Hilfen.
Susanne
Pingback: margin wirkt nicht bei block-element h1 - XHTMLforum