nicht angemeldet
Hallo,
Du verwendest ja schon eine mögliche Variante zur Vermeidung der Collapsing Margins Problematik. Denn wenn 'margin-top' generell '0' ist, kann auch nicht "collapsen"! ;-)
Ja, margin-top und margin-bottom collapsen nicht, wenn margin-top vermieden wird. Dann muss man sich aber bewusst sein, dass der Abstand immer vom *vorherigen* Element gesteuert wird. Das ist problematisch, wenn z.B. vor einer Überschrift ein größerer Abstand sein soll als der Standardabstand, den z.B. ein p-Element davor bringt. Entweder man arbeitet dann mit margin-top oder man wrappt beide Abschnitte in entsprechende Module, die passende margin-bottom erhalten.
Ich nutze wie gesagt immer noch Collapsing Margins, nämlich von den margin-bottoms:
<div style="margin-bottom: 10px">
<div style="margin-bottom: 10px">
<div style="margin-bottom: 10px">
foo
</div>
</div>
</div>
<div>bar</div>
Ich habe dein Beispiel mal eben als JSFiddle erstellt: <http://jsfiddle.net/pSmW7/>
> Der Abstand zwischen den »foo«- und »bar«-Boxen ist hier durch den Collapse eben 10px und nicht 30px. Erst durch Block Formatting Contexts wird dieses an sich nützliche Verhalten unterbunden.
Oder dir fällt ein, dass du um die äußeren DIV-Elemente doch eine Border haben möchtest ...!
Hier wieder als JSFiddle: <http://jsfiddle.net/WLA9d/1/>
(die zusätzliche blaue Umrandung der P-Elemente dient nur der besseren Erkennbarkeit)
Das demonstriert die "Fragilität" solcher Konstrukte, die ich meine/ meinte.
Und auch hier zeigt sich wieder eine der sagen wir mal "Unzulänglichkeiten" von CSS im Bezug auf die Selektoren. Denn um mit der "nur margin-bottom Methode" das gewünschte Ergebnis zu erreichen, bräuchte man entweder einen 'Parent-Selektor', oder müsste Rückschlüsse auf die jeweiligen Kind-Elemente ziehen können - beides ist nicht möglich.
Stattdessen muss man in diesem Fall dann bspw. auf 'margin-top' ausweichen, wie in diesem Beispiel: <http://jsfiddle.net/y25k8/>
Oder eben alternativ 'margin-bottom' (in diesem Fall für die Klasse "mb") für verschachtelte Elemente wieder aufheben (auf Null setzen) - Beispiel: <http://jsfiddle.net/L7uvy/>
Je mehr ich darüber nachdenke, umso mehr komme ich zu der Überzeugung, dass es sich "nicht lohnt", für die Fälle, wo man das Collapsing tatsächlich bewusst haben will, die möglichen unerwünschten "Nebenwirkungen" (also Collapsing, wo nichts collapsen soll, und nicht-collapsen, wo es collapsen soll) in Kauf zu nehmen.
Die Variante grundsätzlich nur 'margin-bottom' zu verwenden, erscheint mir dabei als die beste Ausgangsbasis. Aber wie gesagt, ohne Collapsing Margins "einzuplanen/ -bauen".
Gruß Gunther