Was bringt CSS dazu, die Ränder zu reduzieren?

Das CSS2-Box-Modell sagt uns, dass benachbarte vertikale Ränder kollabieren .

Ich finde es ziemlich ärgerlich, die Quelle vieler Designfehler zu sein. Ich hoffe, dass ich durch das Verständnis des Zwecks des Reduzierens von Rändern verstehe, wann ich sie verwenden und wie ich sie vermeiden kann, wenn sie nicht benötigt werden.

Was ist der Zweck dieser Funktion?

Die allgemeine Bedeutung von "Rand" besteht nicht darin, "um 10 Pixel verschieben" zu vermitteln, sondern "neben diesem Element müssen 10 Pixel Leerraum vorhanden sein".

Ich habe immer festgestellt, dass dies am einfachsten mit Absätzen zu konzipieren ist.

Wenn Sie nur Absätze angegeben hätten margin-top: 10pxund keine Ränder für andere Elemente hätten, wäre eine Reihe von Absätzen wunderschön voneinander getrennt. Aber natürlich würden Sie Probleme bekommen, wenn Sie ein anderes Element unter einen Absatz setzen. Die beiden würden sich berühren.

Wenn die Ränder nicht kollabieren würden, würden Sie zögern, margin-bottom: 10pxIhren vorherigen Code zu ergänzen , da dann jedes Absatzpaar einen Abstand von 20 Pixel haben würde, während Absätze nur um 10 Pixel von anderen Elementen getrennt wären.

Vertikale Ränder kollabieren also. Wenn Sie einen oberen und unteren Rand von 10 Pixel hinzufügen, sagen Sie: "Es ist mir egal, welche Randregeln andere Elemente haben. Ich fordere mindestens 10 Pixel Abstand über und unter jedem meiner Absätze."