复习|外边距折叠（塌陷）这事

---

theme: channing-cyan

highlight: a11y-dark

复习|外边距折叠(塌陷)这事

前言

要开始【复习】系列了，没办法的事，一些理论知识还是要的，知道归知道，会用归会用，但是那人问你你得条理清晰的回答出来。谁是那人？？？懂的都懂

关于 margin collapsing 翻译为外边距塌陷还是折叠这事，都有人提，我个人更倾向于折叠。折叠挺好理解啊，你有下外边距，我有上外边距，两边一靠近，重合折叠了。塌陷嘛，有一边塌了没了？

也不好说啥，只说个人倾向于叫“外边距折叠”，后文都成 margin collapsing 为外边距折叠。

什么是外边距折叠

块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为外边距折叠。

举个例子，两个相邻的 div 元素，上一个设定了距离底部的外边距是50px，下面的一个 div 设定的距离顶部的外边距是70px，而这两个相邻div实际上的外边距距离是70px，而不是50px。这就是发生了外边距折叠现象，有一边的外边距被折叠了。

下面是两个示意对比图

什么时候会发生外边距折叠

1.同一层级的两个相邻元素

普通的两个相邻块级元素，可以发生外边距折叠。后一个元素没使用clear 清除浮动。

例如下面这两个元素，会发生外边距折叠，它们实际的外边距距离是70px。

```css html

上铺的兄弟

下铺的兄弟

```

2.直接相邻的父子元素

下面是一段来自 mozilla 的翻译解释，可以看得出来，父子元素发生外边距折叠的条件是复杂的。

如果没有边框border，内边距padding，行内内容，也没有创建块级格式上下文或清除浮动来分开一个块级元素的上边界margin-top 与其内一个或多个后代块级元素的上边界margin-top；或没有边框，内边距，行内内容，高度height，最小高度min-height或 最大高度max-height 来分开一个块级元素的下边界margin-bottom与其内的一个或多个后代后代块元素的下边界margin-bottom，则就会出现父块元素和其内后代块元素外边界重叠，重叠部分最终会溢出到父级块元素外面。

下面是一个父元素和其子元素发生 margin-top 折叠的情形，实际的外边距距离不是两者 margin-top 的和，而是取了一个较大的值 70px。

```css html

子元素div

```

类似的父子元素的场景，margin-bottom 也会发生外边距折叠。如下所示，父元素和其子元素的 margin-bottom 发生了折叠，实际的外边距距离取了大的值 70px。

```css ```

```html

子元素div

父元素的兄弟元素