CSS盒子边距塌陷（Margin Collapse）是指在两个相邻的盒子（Box）之间的垂直边距（Margin）会合并为一个较大的边距的现象。这种现象虽然简单却有时会令我们感到困惑，因为合并后的边距可能不如预期那么大（或者没有像我们期望的那样的大小）。下面就让我们来深入了解一下这种现象，请看下文的详细解释。
.box-1 {
margin-bottom: 10px;
}
.box-2 {
margin-top: 20px;
}
在上面的代码中，.box-1是一个盒子，它拥有10像素的下边距；.box-2也是一个盒子，并且它拥有20像素的上边距。如果我们在HTML中将这两个盒子放在一起（即.box-1紧挨着.box-2），我们期望这两个边距将被组合起来，并显示为30像素的垂直间距。但是，实际上这两个边距将被塌陷（或者合并），它们只会在两个盒子之间显示为20像素，而不是我们期望的30像素。这是因为这两个边距中的最大边距将会被使用，此例中.box-2的20像素边距大于.box-1的10像素边距，所以20像素被保留了下来，而且.box-1的10像素边距被省略了。
当我们了解了CSS盒子边距塌陷的原理后，我们应当知道如何根据需要避免或利用这种塌陷现象。例如，如果我们希望两个相邻盒子之间的边距总是显示为两个边距之和，我们可以使用一个隐式的空白或者在盒子之间添加一个内边距（Padding）来规避边距塌陷。另外，一些专业的 CSS 框架或者布局网格系统也可以使用负边距来利用边距塌陷的特性，来实现快速简单地布局设计。
