CSS 折疊邊距：它們的目的是什麼？

Question

CSS2 盒子模型告訴我們相鄰的垂直邊距會折疊。

我覺得這很煩人，因為它是許多設計錯誤的根源。我希望透過了解折疊邊距的目的，我將了解何時使用它們以及如何在不需要時避免它們。

此功能的目的是什麼？

Answer 1

“margin”的一般含義不是傳達“將其移動 10px”，而是“該元素旁邊必須有 10px 的空白空間。”

我一直發現這是最容易用段落來概念化的。

如果您只為段落指定 margin-top: 10px 並且在任何其他元素上沒有邊距，則一系列段落的間距將會很漂亮。但是，當然，當您將另一個元素放置在段落下方時，您會遇到麻煩。兩人會碰觸。

如果邊距沒有折疊，您會猶豫是否將margin-bottom: 10px 添加到先前的程式碼中，因為這樣任何一對段落都會間隔20px，而段落將與其他元素僅10px 。

所以垂直邊距會塌陷。透過添加 10 像素的頂部和底部邊距，您會說：「我不關心其他元素的邊距規則。我要求每個段落的上方和下方至少有 10 像素的內邊距。」