Hier ist ein Blogbeitrag in einem Satz über Margin Collapsing: Wenn zwei Blockelemente übereinander gestapelt sind, ist der vertikale Abstand zwischen ihnen der größere zwischen dem margin-bottom des oberen Elements und dem margin-top des unteren Elements.
Es ist ein bisschen seltsam und Schulterzucken. Paar Vorbehalte damit, wie man erwarten könnte.
Ich finde es faszinierend, wie es zu dem perfekten kleinen Blogbeitrag wird, wenn Leute einen Aha-Moment damit haben. MDN sieht es sogar als passend an, eine eigene Seite zu haben.
Obwohl das Margin-Collapsing-Verhalten anfangs etwas unintuitiv ist, erleichtert es die Arbeit mit mehreren verschachtelten Elementen, bei denen das Verhalten oft erwünscht ist.
Es ist wahrscheinlich nicht der intuitivste Aspekt von CSS, aber die Erkenntnis hier ist, dass eine gewisse Logik dahinter steckt und sobald man sie gelernt hat, verschwinden Geheimnis und Verwirrung plötzlich!
Sehen Sie, wie das Kollabieren von Margins Dinge knifflig machen kann? Ich persönlich stoße frustrierend oft darauf, wenn ich mit Typografie arbeite.
Margin Collapsing kann frustrierend sein, aber wenn man weiß, wann und wie es passiert, wird es einfacher, Probleme zu beheben, wenn sie auftreten.
Kollabierende Margins können lästig sein, wenn man nicht richtig versteht, wann sie auftreten. Der erste Schritt, um damit umzugehen oder sie zu vermeiden, ist [zu] verstehen, mit welchem Fall von kollabierenden Margins wir es zu tun haben.
Margin Collapse ist etwas, das in jedem CSS-Buch im ersten oder zweiten Kapitel erwähnt wird. Als ich vor langer Zeit etwas über Stylesheets lernte, habe ich natürlich davon gelesen.
Jonathan Harrell im Jahr 2018:
Das Konzept des Margin Collapse ist grundlegend für das Verständnis des Box-Modells in CSS, aber es ist tatsächlich recht komplex und potenziell verwirrend. Die Spezifikation, die beschreibt, wie Margin Collapse funktioniert, ist gründlich, aber schwer zu verstehen.
Ich führe das alles nicht auf, um zu sagen, dass es ein überbloggtes Thema ist (nichts ist überbloggt), sondern dass es ein interessanter Faden zum Nachverfolgen ist. Wenn so viele Leute das Bedürfnis haben, etwas zu erklären, das letztendlich so klein ist, passiert dort etwas Seltsames (wahrscheinlich Schlechtes).
Zweifellos ist das der Grund, warum es als einer der Fehler im Design von CSS gilt
Die oberen und unteren Ränder einer Box hätten niemals automatisch zusammenfallen dürfen, da dies die Wurzel allen Übels beim Margin Collapsing ist.
Hervorhebung ihrerseits und ist tatsächlich der einzige fette Text in der gesamten Liste.
Wenn Sie das Verhalten stoppen möchten, müssen Sie etwas tun, das wahrscheinlich mehr Nebenwirkungen hat, als es wert ist, wie z. B. die Elemente zu floaten. Es ist nicht so einfach wie das Auslösen eines neuen Block Formatting Context, da dies das ist, was display: flow-root; tut, und das funktioniert nicht.
Sie sind wahrscheinlich besser dran, wenn Sie einfach davon wissen und damit umgehen, wenn es auftritt, indem Sie die Margins systematisch in eine Richtung fließen lassen oder seltsam werden.
Ich wende keine Margins auf ein Element an, das sich Raum mit anderen Elementen teilt. Ich lege die Elemente in ein übergeordnetes Div, und die Margins der Kindelemente ändern einfach die Größe der übergeordneten Elemente. Wegen dieser Gewohnheit muss ich mich nicht mit Margin Collapse herumschlagen.
Margin Collapse kann auch zwischen übergeordneten und untergeordneten Elementen auftreten.
In den frühen Tagen von HTML und CSS war Margin Collapse sehr hilfreich. Stellen Sie sich zwei Absätze mit Standard-Ober-/Unterrand vor. Der Abstand zwischen ihnen wäre doppelt so groß, wenn nicht für Margin Collapse.
Als wir anfingen, CSS für das Layout zu verwenden, wurde es problematisch. Ich finde es hilfreich, den oberen Rand jedes Elements in meinem Reset-Stylesheet einfach zu entfernen. Dann müssen Sie sich keine Sorgen machen, dass vertikale Ränder zusammenstoßen.
Als ich zum ersten Mal von CSS erfuhr, um, äh, 2005?, hat mir niemand von Margin Collapse erzählt (und es gab nicht viele gute Bücher oder Online-Quellen), also war ich verdammt verwirrt, warum sie sich nicht addierten. Als ich lernte, dass es dazu diente, die Abstände von Absätzen und Überschriften praktisch zu gestalten, habe ich gespottet. Dann habe ich versucht, etwas zu floaten, sagen wir links, und 20px Rand auf der rechten Seite gesetzt... nun, IE6 würde das freundlicherweise verdoppeln (warum? weil es das natürlich tat!) Ich lernte schnell, Polsterung zu lieben und habe mich erst nach vielleicht 8 Jahren wieder mit Margins beschäftigt.
Ich habe sie erst für ihre negativen Werte lieben gelernt!
Sobald ich Margin Collapsing gut verstanden hatte, erkannte ich, wie wertvoll es für bestimmte Layouts ist. Wenn Sie beispielsweise einen Artikel haben, kann Margin Collapsing sehr nützlich sein, um Margins um Artikel-Body-Elemente wie Absätze, Bildeinbettungen, Überschriften usw. zu setzen. Ohne Margin Collapsing müsste ich auf Geschwister-Selektoren zurückgreifen, aber damit kann ich einfacheres CSS für die vielen Konfigurationen von Artikeltext haben.
Margin beschreibt den minimalen Abstand, den andere Elemente vom aktuellen Feld fernhalten sollten. Es ist sinnvoll, dass sich Margin den Raum teilt und kollabiert. Wenn überhaupt, denke ich, dass der Rand eines Kindes in die Polsterung des Elternteils kollabieren sollte, da Polsterung im Grunde ein nach innen gerichteter Rand ist.
Ich betrachte Margin als leeren Raum, der durch "mindestens dieser viel Platz" definiert ist. Wenn Sie also zwei Margins haben, die aufeinandertreffen, müssen sie sich auf die Menge an leerem Raum einigen, die zwischen ihnen vorhanden sein soll.
Margin 1: "Nun, ich brauche mindestens 25px unter mir."
Margin 2: "Pff, ich brauche mindestens 50px über mir!"
Margin 1: "Oh, nun, das sind mehr als 25px, also bleiben wir dabei."
Margin 1 und 2 schütteln sich aus 50px Entfernung die Hand, alle gehen glücklich davon.
Es ist nicht wirklich Margin Collapse, denn niemand verliert seinen benötigten leeren Raum. Es ist Margin-Vereinbarung. Beide einigen sich darauf, nur so viel Platz zu verwenden, wie beide ihre Anforderungen erfüllt.
Wissen Sie, was mich aber wütend macht? Dass sich innerhalb eines Flex-Elements die Margins nicht kollabieren. Ich weiß nicht warum, aber ich habe das Gefühl, es ist eine Art Verrat an meinen Erwartungen.