Collapsing Margins

Design ist fertig .. ihr entfernt 1-2 Hilfslinien die ihr zum ausrichten benutzt habt und plötzlich stimmen Abstände nicht mehr die ihr mit margin-bottom bzw. margin-top gestaltet habt. Eine Hintergrundgrafik ist verschoben oder einer der oberen bzw. untere Abstände ist verrutscht.

Ihr habt 2 DIV Boxen und möchtet diese mit margin-bottom bzw. margin-top ausrichten. Unter ganz bestimmten Umständen werden die Angaben der Elemente zusammengefasst.

  • Das äußere DIV hat kein oberen und unteren Rahmen
  • Das äußere DIV besitzt kein vertikales padding
  • Das äußere DIV verfügt ober- und unterhalb über keinen Inhalt

Auch wenn es nervt .. es ist ein Feature von HTML. Es ist dazu gedacht in einfach gegliederten Texten Abstände nicht unkontrollierbar wachsen zu lassen.

Wie kann man das also verhindern?

Es gibt einige Möglichkeiten:

  • benutzt padding statt margin
  • probiert einen border zu setzen wenn möglich
  • erzeugt eine clearance zwischen den Elementen
  • Elemente mit overflow, float (left/right), position (absolute/fixed), display (inline-block) kolabieren nicht .. beachtet dabei das ihr einen BFC (block formating content) erzeugt der ggf. noch andere Auswirkungen hat

Leave a Reply

Your email address will not be published. Required fields are marked *