margin塌陷以 及 margin合并

总结：

• 普通文档流中块级元素（block）的垂直margin，没有border 和padding去分割 且没有触发BFC 而相遇时会margin合并：margin更大的那个元素保留margin，margin较小的元素会丢掉margin
• BFC元素、行内元素、浮动元素、绝对定位之间的margin不会合并
• 兄弟元素，及父子元素中父元素margin大时是margin 合并：
• 父子元素 中父元素没有padding 或 border把两个margin分开，且没有触发BFC时，子元素margin >父元素margin – 会发生margin塌陷：子元素去掉了margin，父元素用了子元素的margin
  解决方案：兄弟元素推荐只写一个元素的margin–BFC破坏结构； 父子元素推荐BFC，加border或padding破坏结构

1. 什么是margin 合并？ 及 何时会margin合并？

margin 合并就是，当两个垂直margin相遇时，它们将形成一个margin。合并的margin等于两个发生合并的margin中的较大者。

合并条件：

• 当两个垂直margin相遇时 – 两个margin之间如果没有border 和padding去分割 而相遇了，它们将形成一个margin
• 只有普通文档流中块级元素（block）的垂直margin才会发生合并。行内元素，浮动元素绝对定位之间的margin不会合并

注意：普通文档流中块级元素 、 垂直margin 、 没有border 和padding去分割 而相遇 才会margin合并：margin更大的那个元素保留margin，margin较小的元素会丢掉margin

2. margin 合并的几种情况

1. 兄弟元素margin 合并

2. 父子元素（父元素没有padding 或 border把两个margin分开，让其不相遇）

父元素margin大 – 正常margin合并

正常的合并：父元素保留margin，子元素去掉垂直margin

子元素的margin大 – --------------margin塌陷 --------------------

• 子元素的margin大，父元素的margin小 或者 父元素没有margin – margin塌陷：子元素去掉了margin，父元素用了子元素的margin（子元素的margin用在了父元素身上）

margin塌陷 的条件父元素没有padding 或 border把两个margin分开，且没有触发BFC时，子元素margin >父元素margin – 会发生margin塌陷

子类标签设置margin-top:50px;父元素没有margin时，显示结果：不是子类标签距离父类标签上边框50像素，而是子类标签和父类标签距离上级标签50个像素

期望显示：

3. 一个空元素，没有border和padding

两个margin相遇就会发生合并

如果这个外边距遇到另一个元素的外边距，还会发生合并

3. margin合并解决方法

兄弟元素：

• 推荐直接只写一个元素的margin，使之达到想要的效果。
• BFC解决办法：将兄弟元素分别作为子元素放在触发了BFC的块级元素内(不推荐使用,会破坏HTML文档结构)

父子元素：

• 可以通过给父元素添加padding 或 border(不建议使用,会破坏布局)

• 推荐使用BFC解决: 将父元素触发BFC，变成一个独立的渲染区域，不影响外界布局
  BFC详细了解

---

参考：

• HTML:margin塌陷现象的解决
• 如何解决margin塌陷以及margin合并