Aus welchem ​​Grund wurden Margin-Collapse-Regeln in CSS eingeführt?

Question

Ich kann einfach nicht die Situation herausfinden, wenn dieses clevere Regelwerk hilfreich sein kann. Sie durchbrechen die Einfachheit des Boxmodells und bieten unendliche Problemquellen, wenn Sie verschiedene Teile des Layouts miteinander kombinieren. Also, was ist der Grund?

Rules für die Referenz.

Update: Regeln sind ziemlich logisch für Geschwisterelemente, aber warum sollten Margen auf Elternelemente bis zum Baum übertragen werden? Welche Art von Problemen löst das?

Zum Beispiel:

<div style="margin: 20px; background-color: red;"> 
    <div style="margin: 20px;"> 
     <p style="margin: 100px;">red</p> 
    </div> 
</div> 
<div style="margin: 20px; background-color: blue;">blue</div> 

Top-Level-divs sind voneinander im Abstand von 100px.

Answer 1

Dies ist eine der Situationen, in denen es keinen Sinn macht, bis Sie erkennen, dass die Alternativen weniger sinnvoll sind.

Wie Sie wahrscheinlich wissen, geben Ränder den Abstand zwischen Elementen an, es ist kein "äußerer Abstand", der jedes Element umgibt. Wenn zwei Elemente mit dem Rand 20px nebeneinander liegen, beträgt der Abstand zwischen ihnen 20px, nicht 40px.

Da der Rand eine Entfernung zu einem anderen Element darstellt, ist es sinnvoll, dass der Abstand vom Element zu den umgebenden Elementen und nicht zur Grenze des übergeordneten Elements ist.

Wenn der Rand zum Rand des Elternelements gezählt würde, würde das Einfügen von Elementen in ein div Element zusätzlichen Abstand zwischen den Elementen einführen, obwohl der div selbst keinen Rand oder Abstand hat. Die Ränder um ein Element sollten gleich bleiben, wenn Sie eine unformatierte div darum herum hinzufügen.

Answer 2

Wann könnte es hilfreich sein? Das einfachste Beispiel: Eine Liste von Absätzen und Überschriften, jeweils mit margin-top und margin-bottom. Sie möchten einen Rand am oberen und unteren Rand des Artikels und zwischen verschiedenen Elementen.

Mit dem Rand zusammenklappbar, können Sie verzichten, spezielle Ränder auf das erste oder letzte Element (NICHT ein Teil der ursprünglichen CSS-Spezifikation!) Oder Auffüllen des Containers.

Aber ich stimme insgesamt zu, es ist eine sinnlose Funktion.

Answer 3

Betrachten Sie einen Textkörper, der mehrere Absätze enthält. Sie möchten, dass jeder Absatz durch 2em getrennt wird, und Sie möchten, dass der erste Absatz vom vorherigen Inhalt um 2 em getrennt wird und der letzte Absatz vom folgenden Inhalt um 2 em getrennt wird.

Dies ist leicht mit dem folgenden CSS erreicht, da die oberen und unteren Rand die Absätze Trennung kollabiert:

p { 
    margin-top: 2em 
    margin-bottom: 2em; 
} 

Wenn Margen, nicht kollabieren diese an den Rändern durch ein Leerzeichen getrennt werden würde von 4em, nicht von 2em. Ohne Randeinschränkungen wäre die einzige Möglichkeit, den gewünschten Effekt zu erzielen, die Einrichtung zusätzlicher Regeln für den ersten und letzten Absatz, die eine Klasse oder ID enthalten würden (die beibehalten werden müsste, wenn der Text jemals geändert würde). oder wickeln Sie sie in ein ansonsten unnötiges zusätzliches Element ein und verwenden Sie: first-child und: last-child, oder ... nun, Sie bekommen die Idee.

Ich kann garantieren, dass, wenn Marge nicht auftreten kollabiert, so dass eine Menge doppelter Fragen für Abhilfen fordert den konsequenten Abstand, der die obige Regel :-) Eigentlich