Development-Blog

Für Elemente, die dem normalen Elementfluß unterliegen, gibt es die Besonderheit, dass ihre Außenabstände unter bestimmten Bedingungen zusammenfallen können (=’collapsing margins’). Dies bedeutet, dass die oberen bzw. unteren Abstände dieser Elemente sich unter bestimmten Umständen überlappen bzw. übereinander schieben:

1. Nur die margins von statisch positionierten Elementen können zusammenfallen. Die margins von Elementen, die per float bzw. absolut oder relativ positioniert sind, werden immer dargestellt.
2. Randabstände rechts und links fallen nie zusammen. Das ist erst mit CSS 2.1 so definiert, aber bedingt durch die Tatsache, dass Block- Level- Elemente nur untereinander stehen können, war dies auch vorher schon nicht anders möglich.
3. Wenn mehrere Elemente direkt untereinander abgebildet werden, dann werden die direkt aneinander grenzenden Randabstände (margin-bottom bzw. margin-top) zusammengezogen. Es fallen also immer nur margins zusammen, die sich direkt berühren.
4. Dies gilt analog auch für verschachtelte Block- Level- Elemente. Wenn ein Element innerhalb seines Ahnenelements direkt an der oberen bzw. unteren Kante des Ahnenelements liegt und die Randabstände beider Elemente nicht durch padding oder border voneinander getrennt sind, dann fallen die aneinander grenzenden margin-Flächen zusammen.

Filed under: CSS