CSS-Kollektorränder: Was ist ihr Zweck?

Question

Das CSS2-Boxmodell sagt uns, dass benachbarte vertikale Ränder zusammenfallen.

Ich finde das sehr ärgerlich, da es die Ursache für viele Designfehler ist. Ich hoffe, dass ich durch das Verstehen des Zwecks der Reduzierung von Rändern verstehe, wann ich sie verwenden sollte und wie ich sie vermeiden kann, wenn sie nicht benötigt werden.

Was ist der Zweck dieser Funktion?

Answer 1

“margin”的一般含义不是传达“将其移动 10px”，而是“该元素旁边必须有 10px 的空白空间。”

我一直发现这是最容易用段落来概念化的。

如果您只为段落指定 margin-top: 10px 并且在任何其他元素上没有边距，则一系列段落的间距将会很漂亮。但是，当然，当您将另一个元素放置在段落下方时，您会遇到麻烦。两人会碰触。

如果边距没有折叠，您会犹豫是否将 margin-bottom: 10px 添加到之前的代码中，因为这样任何一对段落都会间隔 20px，而段落将与其他元素仅 10px。

所以垂直边距会塌陷。通过添加 10 像素的顶部和底部边距，您会说：“我不关心其他元素的边距规则。我要求每个段落的上方和下方至少有 10 像素的内边距。”