Aus welchem ​​Grund Marge Zusammenbruch Regeln wurden in CSS eingeführt?

Question

Just kann nicht die Situation herauszufinden, wann dieser kluge Satz von Regeln hilfreich sein kann. Sie brechen die Einfachheit des Box-Modell und bieten unendliche Quelle von Problemen, wenn Sie verschiedene Stücke von Layout zusammen kombinieren. Also, was ist der Grund?

Regeln für den Hinweis.

Update: Regeln sind recht logische Elemente für Geschwister, aber warum Margen übergeordnete Elemente bis zu dem Baum ausbreiten sollte? Welche Art von Problemen, die?

lösen

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 voneinander durch 100px angeordnet ist.

Answer 1

Dies ist eine der Situationen, in denen es nicht wirklich Sinn macht, bis Sie erkennen, dass die Alternativen weniger Sinn machen.

Wie Sie wahrscheinlich wissen, geben Sie Ränder um den Abstand zwischen den Elementen, es ist keine „äußere padding“, die jedes Element umgibt. Wenn zwei Elemente mit dem Rand 20px nebeneinander sind, der Abstand zwischen ihnen ist 20px, nicht 40px.

als Rand um einen Abstand zu einem anderen Element ist, ist es sinnvoll, dass der Abstand von dem Element mit den umgebenden Elementen, nicht an der Grenze des Elternelements.

Wenn der Rand an der Grenze des Elternelements gezählt werden würden, die Elemente in einem Element div setzen würde einzuführen zusätzlichen Abstand zwischen den Elementen der eventhough div hat selbst keinen Spielraum oder Polsterung. Die Ränder um ein Element sollte gleich bleiben, wenn Sie einen unstyled div um es hinzuzufügen.

Answer 2

Wann könnte es hilfreich sein?

Das einfachste Beispiel: eine Liste der Absätze und Überschriften, die jeweils mit einem margin-top und margin-bottom. Sie wollen einen Seitenrand auf der Ober- und Unterseite des Artikels, und zwischen verschiedenen Elementen.

Mit Rande kollabiert, können Sie tun, ohne Einstellung spezielle Ränder auf dem ersten oder letzten Punkt (nicht Teil der ursprünglichen CSS-Spezifikation!) Oder den Behälters Polsterung.

Aber ich stimme zu, auf einem ganz, es ist eine sinnlose Funktion.

Answer 3

Betrachten Sie einen Textkörper mehrere Absätze enthält. Sie wollen, dass jeder Absatz von 2em getrennt werden, und Sie wollen, dass der Absatz von dem vorhergehenden Inhalt von 2em getrennt werden, und der letzten Absatz von folgendem Inhalt von 2em getrennt werden.

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 die Margen nicht kollabieren, das an den Rändern durch einen Abstand von 4em getrennt werden würde, nicht 2em. Ohne Rand kollabieren, wäre der einzige Weg, um den gewünschten Effekt zu erzielen sein, einige zusätzliche Regeln für die ersten und letzten Absätze einzurichten, die ihnen eine Klasse oder id würde bedeuten geben (die beibehalten werden müssten, wenn der Text überhaupt geändert wurde) First-Kind und: oder sie in einem ansonsten unnötigen zusätzlichen Elemente und mit Verpackung. Last-Kind, oder ... na ja, Sie bekommen die Idee

Das kann ich garantieren, wenn Marge nicht auftreten kollabiert, so dass eine Menge doppelter Fragen für Abhilfen fragen müsste, um den konsistenten Abstand zu erreichen, dass die oben genannte Regel sieht vor: -)