Josh Comeau erörtert das Konzept des Margin Collapsing
Diese Idee mag einfach klingen, aber wenn Sie schon eine Weile CSS schreiben, wurden Sie mit ziemlicher Sicherheit überrascht, wenn Margins entweder nicht kollabieren oder auf seltsame und unerwartete Weise kollabieren. In realen Projekten können alle Arten von Umständen die Angelegenheit verkomplizieren.
Die Grundlagen, die man wissen sollte
- Margin Collapsing tritt nur in Block-Richtung auf. Dies gilt auch, wenn Sie den `writing-mode` ändern oder logische Eigenschaften verwenden.
- Der größte Margin "gewinnt"
- Jedes Element dazwischen wird das Kollabieren aufheben (wenn wir vom Kollabieren innerhalb eines Elternteils sprechen, selbst ein wenig Padding oder ein Rand ist das Ding dazwischen und verhindert das Kollabieren, wie Geoff bemerkte, als er darüber berichtete).
Aber es wird viel seltsamer
- Margins können kollabieren, auch wenn sie nicht von Geschwisterelementen stammen.
- Margins in der gleichen Richtung von verschiedenen Elementen können ebenfalls kollabieren.
- Margins von beliebig vielen Elementen können kollabieren.
- Negative Margins kollabieren ebenfalls, aber die größere negative Zahl gewinnt.
- Wenn es eine Reihe von Elementen mit unterschiedlichen Margins gibt, müssen Sie im Grunde einen Algorithmus lernen, um zu verstehen, was passiert und warum.
Es ist bedauerlich, dass solche Dinge überhaupt passieren. Es kann für jedes Fähigkeitsniveau frustrierend sein. Dies sind Eigenheiten von CSS, die explizit gelehrt werden müssen, anstatt sich wie ein natürlicher Teil eines Systems anzufühlen. Selbst die CSS-Arbeitsgruppe betrachtet es als einen Fehler
Die oberen und unteren Margins einer einzelnen Box hätten niemals automatisch zusammen kollabieren dürfen, da dies die Wurzel allen Margin-Collapsing-Übels ist.
😬
Ich weiß nicht, ob Margin Collapsing im täglichen CSSing zu *epischen* Problemen führt, aber man muss zugeben, dass es bestenfalls chaotisch ist.
Ich denke auch daran, wie es dieses Jahr Mode war, das Zentrieren von Inhalten über CSS Grid vorzuschlagen und alle Elemente in die Mitte eines Drei-Spalten-Grids zu legen, à la .grid-wrapper > * { grid-column: 2; }. Der Punkt ist, dass man immer noch das volle Grid zur Verfügung hat, sodass es einfacher ist, einzelne Elemente über die gesamte Breite, von Kante zu Kante, gehen zu lassen (oder den Platz anderweitig zu nutzen). Aber wenn man das tut, werden die Elemente zu Grid-Elementen und sind aus dem normalen Fluss herausgenommen, sodass kein Margin Collapsing stattfindet. Das fühlte sich früher wie ein Nachteil dieser Technik an, zumindest für mich, da es unerwartet wäre. Aber wenn ich jetzt darüber nachdenke, wie janky Margin Collapsing ist, ist vielleicht die Vermeidung von Margin Collapsing ein weiterer Vorteil dieser Art von Technik.