CSS margin 属性用于在元素的所有四个边上设置边距。
当两个元素在页面上垂直相邻时，其中一个元素可能会失去其垂直边距。这意味着元素的顶部和底部边距有时会合并为一个边距。单个边距等于折叠的两个边距中最大的一个。
例子：
This paragraph's bottom margin is collapsed.
This paragraph is 20px below the above text.
您希望两个段落之间的边距为 30 像素(第一段的底部边距为 10 像素 + 下一段的顶部边距为 20 像素)。但是在 CSS 中，较大的边距会覆盖，而实际的边距是较大的(20 像素)。
输出： 
如果一个元素具有负边距，则从正边距中减去负边距。例如，40px 和 -30px 的结果边距将为 10px (40px-30px)。如果两个边距都是负值，则使用更大的负值。例如，-20px 和 -50px 的结果边距将为 -50px。
浮动元素和绝对定位元素的边距永远不会塌陷。
边距崩溃的一些具体情况：
- 相邻元素之间：
正如我们在前面的示例中看到的那样，垂直相邻元素的边距会塌陷。 - 父元素与子元素之间：
当相邻边距之间不存在填充、边框或内容时，父元素和子元素的相邻边距会折叠。
例子：
Geeks For Geeks
This paragraph's top
margin is collapsed.
输出： 
这里 h1 和 div 之间的边距是 30px 而不是 50px (30px + 20px)。