molily: Collapsing Margins Strategie

Beitrag lesen

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>

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.

Was gefällt dir an der angegebenen "Lösung/ Variante" nicht?

.module > *:last-child,  
.module > *:last-child > *:last-child,  
.module > *:last-child > *:last-child > *:last-child {  
  margin: 0;  
}

Das ist m.E. keine Lösung, sondern ein fieser, unperformanter, unzureichender Hack. Den würde ich so auf keine Site einsetzen, auf der ich wirklich flexiblen Inhalt erwarte (d.h. beliebige Verschachtelung von Modulen, beliebige Kombinierbarkeit von Modulen).

Ich sage nicht, dass ich eine bessere Lösung kenne. Ich versuche das Problem meist zu begrenzen und ggf. wenige spezifische :last-child-Regeln zu notieren, anstatt obiges »Bombardement«.

Grüße
Mathias