margin塌陷/合并总结

margin塌陷总结

• margin 重叠也叫：外间距重叠 、或外边距合并、或外边距穿透、或外边距塌陷。
• margin 重叠只针对垂直方向，不针对水平方向。

发生的情况：

• 1、兄弟元素之间- 上下外边距合并（重叠）
• 2、父子元素之间-上外边距合并（穿透）（父元没有设置内边距和边框时才会发生合并）

1. 兄弟元素

1.1 全为正值

• 两个兄弟元素在垂直方向上的上下外边距发生合并现象（合并原则：以两者中最大的那个为主）
  • 解决方案
  1. 给任何一个元素加上display:inline-block（BFC）
  2. 把外边距加在一个元素上
  3. 把其中的一个元素的外边距改成内边距

1.2 全为负值

• 取两者中绝对值最大的那个

1.3 一正一负

• 两者相加，得到的结果，为最终移动距离。

2. 父子元素

2.1 全为正值

• 父子元素之间的外边距合并/穿透问题 （子元素的上外边距会合并到父元素的上外边距上面去）（合并原则：以两者中最大的那个为主）
  • 解决方案
  1. 给父元素加上overflow:hidden（BFC）
  2. 给父元素加上边框（防止margin穿透过去）
  3. 把子元素的上外边距去掉 给父元素加上内边距

2.2 全为负值

• 两者合并时，取绝对值最大的那个

2.3 一正一负

• 两者相加，得到的值为最终移动距离