CSS中 margin 重叠问题的理解

相关知识点：

块级元素的上外边距（ margin-top ）与下外边距（ margin-bottom ）有时会合并为单个外边距，

这样的现象称为 “margin 合并” 。

产生折叠的必备条件： margin 必须是邻接的 ! 而根据 w3c 规范，两个 margin 是邻接的必须满足以下条件：

• 必须是处于常规文档流（非 float 和绝对定位）的块级盒子，并且处于同一个 BFC 当中。

• 没有线盒，没有空隙，没有 padding 和 border 将他们分隔开

• 都属于垂直方向上相邻的外边距，可以是下面任意一种情况

• 元素的 margin-top 与其第一个常规文档流的子元素的 margin-top

• 元素的 margin-bottom 与其下一个常规文档流的兄弟元素的 margin-top

•height 为 auto 的元素的 margin-bottom 与其最后一个常规文档流的子元素的 margin-bottom

• 高度为 0 并且最小高度也为 0 ，不包含常规文档流的子元素，并且自身没有建立新的 BFC

的元素的 margin-top

和 margin-bottom

margin 合并的 3 种场景：

（ 1 ）相邻兄弟元素 margin 合并。

解决办法：

• 设置块状格式化上下文元素（ BFC ）

（ 2 ）父级和第一个 / 最后一个子元素的 margin 合并。

解决办法：

对于 margin-top 合并，可以进行如下操作（满足一个条件即可）：

• 父元素设置为块状格式化上下文元素；

• 父元素设置 border-top 值；

• 父元素设置 padding-top 值；

• 父元素和第一个子元素之间添加内联元素进行分隔。

对于 margin-bottom 合并，可以进行如下操作（满足一个条件即可）：

• 父元素设置为块状格式化上下文元素；

• 父元素设置 border-bottom 值；

• 父元素设置 padding-bottom 值；

• 父元素和最后一个子元素之间添加内联元素进行分隔；

• 父元素设置 height 、 min-height 或 max-height 。

（ 3 ）空块级元素的 margin 合并。

解决办法：

• 设置垂直方向的 border ；

• 设置垂直方向的 padding ；

• 里面添加内联元素（直接 Space 键空格是没用的）；

• 设置 height 或者 min-height 。

回答： margin 重叠指的是在垂直方向上，两个相邻元素的 margin 发生重叠的情况。

一般来说可以分为四种情形：

第一种是相邻兄弟元素的 marin-bottom 和 margin-top 的值发生重叠。这种情况下我们可以

通过设置其中一个元素为 BFC

来解决。

第二种是父元素的 margin-top 和子元素的 margin-top 发生重叠。它们发生重叠是因为它们是

相邻的，所以我们可以通过这

一点来解决这个问题。我们可以为父元素设置 border-top 、 padding-top 值来分隔它们，当然

我们也可以将父元素设置为 BFC

来解决。

第三种是高度为 auto 的父元素的 margin-bottom 和子元素的 margin-bottom 发生重叠。它们

发生重叠一个是因为它们相

邻，一个是因为父元素的高度不固定。因此我们可以为父元素设置 border-bottom 、

padding-bottom 来分隔它们，也可以为

父元素设置一个高度， max-height 和 min-height 也能解决这个问题。当然将父元素设置为

BFC 是最简单的方法。

第四种情况，是没有内容的元素，自身的 margin-top 和 margin-bottom 发生的重叠。我们可

以通过为其设置 border 、 padding 或者高度来解决这个问题。

（完结）

我的小程序希望大家多多扫码支持下