提示：为了更直观的学习，本文省略了部分css样式代码。相信大家在日常工作中经常会遇到以下情况：在制作静态页面时，为了页面的整体协调和美观，我们希望子框image-div的上边缘与上边缘保持一定的距离父框header-div间距的边缘。当前页面效果：目标页面效果：为了实现上面的效果，我们首先可以想到给子框设置一个topmargin：让我们看看结果如何？结果不是我们预期的，子框image-div与父框header-div的上边缘没有形成一定的距离。这两个箱子居然一起往下移动，多了一块红框区域。而这种现象正是CSS中经常遇到的“margincollapse”问题之一。折叠边距流中块级元素的顶部和底部边距有时会合并（折叠）为单个边距（最大合并边距），这种现象称为边距折叠。边距崩溃的原因是外边距。有以下四种情况来计算情况：如果都是正数，取最大值；如果相同，则取其一；如果有正数和负数，取最大的正数加上最小的如果负数的和都是负数，取最小值。Collapsebetweenadjacent(sibling)boxes在CSS中，两个相邻兄弟框的外边距区域是公共的，这会导致相邻兄弟框之间的边距折叠。下图是一个相关的例子，设置div1框的bottommargin，下面设置div2框的topmargin：
