Good ol’ Margin-Collapsing

0
69

Hier ist ein ein-Satz-blog-post über margin-Kollaps: Wenn zwei block-Elemente übereinander gestapelt übereinander, die vertikalen Raum zwischen Ihnen ist der größere, zwischen den man auf top margin-bottom und die eine auf der Unterseite ist der Rand-oben.

Es ist ein bisschen komisch und ascii-shruggy. Paar Vorsichtsmaßnahmen mit Ihnen, als Sie vielleicht erwarten.

Ich finde es faszinierend, wie es sorgt für die perfekte Art mini-blog-post, wenn die Leute haben ein ah-ha moment darüber. MDN auch noch sieht, fit, haben eine eigene Seite.

Adam Roberts im Jahr 2015:

Obwohl die margin-collapse-Verhalten ist auf den ersten ein wenig unintuitiv, es macht das Leben leichter machen, im Fall von mehreren verschachtelten Elementen, wo das Verhalten ist oft wünschenswert.

Andrew Grant im Jahr 2015:

Es ist wahrscheinlich nicht die intuitive Aspekt von CSS, aber das mitnehmen ist hier, dass es eine gewisse Logik im Spiel, und sobald Sie haben es gelernt, das Geheimnis und die Verwirrung verschwindet plötzlich!

Geoff Graham im Jahr 2015:

Sehen Sie, wie die kollabierenden Gewinnspannen kann die Dinge schwierig? Ich persönlich stoßen diese auf eine frustrierend häufige Grundlage beim Umgang mit Typografie.

Magnus Benoni in 2016:

Margin collapsing kann frustrierend sein, zu behandeln, aber wissen, Wann und wie es passiert, wird es einfacher für Sie, um Probleme zu beheben, wenn Sie auftreten.

Ire Aderinokun 2017:

Zusammenklappbaren Ränder können ein Schmerz sein, wenn Sie nicht richtig verstehen, wenn Sie auftreten. Der erste Schritt, um den Umgang mit bzw. die Vermeidung von Ihnen ist [zu] verstehen, genau das, was Fall der zusammenklappbaren Ränder sind wir Umgang mit.

Adam Laki im Jahr 2018:

Marge Zusammenbruch wird etwas erwähnt, dass in jedem CSS-Buch ist in der ersten oder zweiten Kapitel. Als ich erfuhr über die stylesheets in eine lange Zeit, natürlich, ich Lesen Sie über es.

Jonathan Harrell im Jahr 2018:

Das Konzept der margin-Einbruch ist fundamental für ein Verständnis des box-Modell in CSS, aber es ist tatsächlich sehr Komplex und potentiell verwirrend. Die Spezifikation, die beschreibt, wie Marge Zusammenbruch funktioniert, ist eine Gründliche, aber schwer zu verstehen.

Ich glaube nicht, Punkt alle diese sagen, es ist ein über-Thema gebloggt (nichts ist), sondern dass es ein interessanter thread zu Folgen. Wenn so viele Menschen das Bedürfnis, etwas zu erklären letztlich so klein ist, es ist etwas seltsam (vermutlich schlechtes) passiert es.

Kein Zweifel, dies ist der Grund, warum es als einer der Fehler in der Gestaltung von CSS:

Die oberen und unteren Ränder einer box sollte nie erlaubt worden, Zusammenbruch automatisch aneinander als diese ist die Wurzel aller margin-collapsing böse.

Schwerpunkt ihrigen und in der Tat, die nur Fett formatierter text in der gesamten Liste.

Wenn Sie schauen, um halt das Verhalten, müssen Sie etwas tun, das hat wahrscheinlich mehr Nebenwirkungen als es Wert ist, wie float-Elemente. Es ist nicht ganz so einfach als Anstoß für eine neue Block-Formatierungs-Kontext, als das, was Anzeige: flow-Wurzel; und das funktioniert nicht.

Du bist wahrscheinlich besser dran, nur es zu wissen und Umgang mit es wie es kommt, indem Sie systematisch fließenden Margen in eine Richtung, oder sich seltsam.