CSS 盒子的边距塌陷

tip:为能更直观地学习，本文章已省略部分 css 样式代码。

我相信下面的情形大家在日常工作中常常碰到：在制作静态页面中，为了页面整体的协调与美观，我们想让子盒子 image-div 的上边沿距离父盒子 header-div 的上边沿有一定间距。

现页面效果：

目标页面效果：

为了达成上图的效果，我们首先就能想到给子盒子设置一个上外边距：

<style>
    .image-div {    /*子盒子*/
        margin-top:25px;
    }
</style>

让我们来看看结果如何呢？

结果和我们所预料的并不相同，子盒子 image-div 并没有和父盒子 header-div 的上边沿形成一定的间距。这两个盒子竟然一起往下移动了，多出了红框区域。

而这种现象，就是 CSS 中常遇到的“边距塌陷”问题中的一种。

边距塌陷

流内块级元素的 top 与 bottom 外边距有时会合并（塌陷）为单个外边距（合并后最大的外边距），这样的