关于前端:CSS-盒子的边距塌陷

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

我置信上面的情景大家在日常工作中经常碰到：在制作动态页面中，为了页面整体的协调与好看，咱们想让子盒子 image-div 的上边际间隔父盒子 header-div 的上边际有肯定间距。

现页面成果：

指标页面成果：

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

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

让咱们来看看后果如何呢？

后果和咱们所意料的并不相同，子盒子 image-div 并没有和父盒子 header-div 的上边际造成肯定的间距。这两个盒子居然一起往下挪动了，多出了红框区域。

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

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

导致边距塌陷的起因是外边距，有以下四种状况计算状况：

如果都是负数，则取最大值
如果雷同，则取其中之一
如果有正有负，则取最大的负数加上最小的正数之和
如果都是正数，则取最小值。

在 CSS 当中，相邻两个兄弟盒子的外边距区域是公共的，这会导致相邻兄弟盒子之间的边距呈现塌陷状况。

下图是相干示例，设置 div1 盒子的下边距，另设置下方 div2 盒子的上边距：

<style>
    #block1 {margin-bottom: 20;}
    #block2 {margin-top: 10;}
</style>

<div id = "block1">div1</div>
<div id = "block2">div2</div>

在浏览器开发者工具先看 div1 的 margin 区域（红框）：

div2 的 margin 区域（绿框区域）：

对应状况：两个盒子之间的外边距如果都是负数，则取最大值。

下方为示例 2，咱们将示例 1 中的外边距改为正数：

<style>
#block1 {margin-bottom: -20;}
#block2 {margin-top: -10;}
</style>

<div id = "block1">div1</div>
<div id = "block2">div2</div>

两个盒子的重叠间隔为两个正数中最小的数“-20px”（绝对值最大 |-20px|）。

解决办法

如果想要防止这种塌陷，能够通过上面两种办法解决：

只给其中一个盒子设置外边距
给两个盒子别离套一个父盒子，父盒子属性设置为 overflow:hidden，同时让父盒子是密闭区域，从而触发 BFC

然而设置父盒子也不是万全的，当呈现以下状况时外边距会塌陷：

块元素 的 margin-top 与 它的第一个子元素 的 margin-top 之间没有 border、padding、inline content、clearance 来分隔。
块元素 的 margin-bottom 与 它的最初一个子元素 的 margin-bottom 之间没有 border、padding、inline content、height、min-height、max-height 分隔。

同时，如果父子专用一段上边距区域，比方父盒子没有上边距时，子盒子设上边距。这时子盒子带着父盒子向下挪动（相当于给父盒子设置外边距）就会产生盒子塌陷。


<style>
*{
    margin:0px;
    padding: 0px;
}
.div1{
    width:300px;
    height: 200px;
    background-color: cornflowerblue;
    margin:0px;
}
.div2{
    background-color: wheat;
    margin: 30px;
}
</style>

<div class="div1">
    <div class="div2">
        div2             
    </div>
</div>

父元素不设置外边距，第一个子元素设置 margin:30px，会发现父元素与子元素一起往下挪动了 30px：

解决办法

想要解决这种塌陷的外围方法是把父子盒子分隔开。咱们能够给父盒子设置边框或者内边距，或者给父盒子标签增加 overflow:hidden 属性，通过触发 BFC 规定，也就是块级格局上下文，把父级渲染成一个独立区域，从而解决父子盒子之间的塌陷问题。

BFC 规定触发形式：

float 不为 none
overflow 不为 visible（罕用 overflow:hidden）
position 为 fixed，absolute
display 为 flex，inline-block，table-cell

当然，在抉择塌陷的解决方案时，应根据具体的情境，不能所有状况都应用雷同的计划，否则会造成其余问题的呈现哦~

那么，在咱们学习以上常识后，就能清晰地晓得结尾引入的问题正是父子盒子间的塌陷，咱们能够通过触发 BFC 规定（仅其中一种计划）来解决：

<style>
    .image-div {    /* 子盒子 */
        margin-top:25px;
    }
    .header-div {   /* 父盒子 */
        overflow:hidden;    /* 触发 bfc*/
    }
<style>

以上就是 CSS 盒子边距常见的塌陷与解决办法，心愿可能对你有所帮忙。

一文读懂浏览器存储与缓存机制

Python Type Hints 从入门到实际

关于前端:CSS-盒子的边距塌陷

边距塌陷

相邻（兄弟）盒子之间的塌陷

父子盒子之间的塌陷

举荐浏览