Wie Collapsing Margins entstehen – und wie man sie am besten umgeht

Collapsing Margins: Survival of the Fittest
Kommentare

Bei der Arbeit mit CSS gibt es so einige Szenarien, bei denen die sogenannten Collapsing Margins für allerhand Stolperfallen sorgen können. Gerade, wenn man nicht weiß, was Collapsing Margins eigentlich sind und wie sie sich verhalten, sind die Probleme oft vorprogrammiert.

Geoff Graham zeigt in seinem Artikel What you should know about collapsing margins, wann Collapsing Margins vor allem auftreten und wie man am besten mit ihnen umgeht.

Collapsing Margins bei vertikalen Außenabständen

Collapsing Margins können sich schnell zu enormen Plagegeistern entwickeln – vor allem, wenn man nicht weiß, woher sie eigentlich kommen. Sie entstehen zum Beispiel, wenn zwei vertikale Außenabstände miteinander in Kontakt kommen. Ist dann auch noch ein Margin größer als der andere, hebt der größere den kleinen Abstand auf, sodass nur ein gesamter Außenabstand übrigbleibt.

Das heißt im Klartext: hat man ein Element mit einem Top-Margin von 25px und ein Element mit einem Bottom-Margin von 50px und platziert sie nebeneinander, erhält man keinen vertikalen Abstand von 75px, sondern nur von 50px. Selbst wenn man den kleineren Abstand vergrößert, bleibt dieses Verhalten bestehen – zumindest, solange beide Margins positiv sind. Ist ein Abstand negativ, wird er vom positiven Abstand abgezogen und so der gesamte vertikale Abstand reduziert.

Ähnlich verhält es sich auch, wenn beide Margins negativ sind. Auch hier ist der Collapsing Margin der größere Abstand – sprich, bei zwei Margins von -25px und -50px gewinnt auch hier der Außenabstand von -50px. Und auch wenn beide vertikalen Abstände gleich groß sind, wird nur einer von ihnen genutzt und der andere collapsed.

Collapsing Margins bei Nested-Child-Elementen

Collapsing Margins treten allerdings nicht nur auf, wenn zwei vertikale Außenabstände aufeinandertreffen, auch wenn der Margin eines Child-Elements den Margin seines Parent kreuzt, wird nur ein Abstand tatsächlich verwendet. Normalerweise würde man erwarten, dass der Gesamtaußenabstand die Summe der Parent- und Child-Margins beträgt. Tatsächlich werden aber alle Abstände der Child-Elemente vom Parent-Margin aufgehoben, solange sie als Nested-Child-Element definiert werden.

Allerdings gibt es einen einfachen Weg, dieses Problem zu lösen. So kann zum Beispiel 1px Padding zum Parent-Element hinzugefügt werden, sodass beide Außenabstände genutzt werden, und auch die Verwendung von border-top erfüllt diesen Zweck.

Doch obwohl es mit der oben genannten Möglichkeit zwar einen Weg gibt, das Problem zumindest bei Parent-Child-Elementen zu umgehen, sorgen Collapsing Margins bei vielen Webdesignern für einiges Kopfzerbrechen. Gerade, wenn ein Außenabstand zu einer Headline oder einer anderen Form von Typografie hinzugefügt werden soll, verursachen sie oft Probleme. Einen echten Tipp, wie sich Collapsing Margins vermeiden lassen, gibt es allerdings nicht – abgesehen davon natürlich, sich auf die Verwendung von margin-bottom zu beschränken.

Aufmacherbild: Close-up of artificial soccer pitch on a sunny day. von Shutterstock / Urheberrecht: Mikkel Bigandt

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -