参考链接： css外边距叠加问题

概念

两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。

计算：

  1. 水平边距永远不会重合
  2. 2个或以上的块级盒模型的垂直margin会重叠，最终margin的计算：
  • 全部为正值，取最大值。
  • 不全为正，都取绝对值，然后用正值减去最大值。
  • 没有正值，则取绝对值，然后用0减去最大值
  1. 相邻的盒模型中，如果其中的一个是浮动的，垂直margin不会重叠，且浮动元素和它的子元素也是这样
  2. 设置了overflow属性的元素和它的子元素之间的margin不会重叠，除了设置为visible外
  3. 设置了绝对定位的盒模型，垂直margin不会重叠，且浮动元素和它的子元素也是这样
  4. 设置了display:inline-block的元素，垂直margin不会重叠，且浮动元素和它的子元素也是这样
  5. 如果一个盒模型的上下margin相邻，这是它的margin可能重叠覆盖，在这种情况下，元素的位置取决于它的margin是否重叠
  • 如果元素的margin和它的父元素的margin-top重叠在一起，盒模型border-top的边界定义和它的父元素相同。
  • 另外，任意元素的父元素不参与margin的重叠，或者说只有父元素的margin-bottom是参与计算的。如果元素的border-top非零，那么元素的border-top边界位置和原来一样。
  • 根元素的垂直margin不会被重叠

图片说明
图片说明

空元素外边距叠加问题

  • 外边距甚至可以与本身发生叠加。假设有一个空元素，他有外边距，但是没有边框或内边距。在这种情况下，顶外边距与底外边距就碰到了一起，它们会发生叠加。
  • 所有的外边距会叠加成一个外边距
  • 但是 浏览器一般会理解为没叠加（我也不懂？）

防止外边距重叠解决方案：

1、外层元素padding代替
2、内层元素透明边框border:1px solid transparent;
3、内层元素绝对定位postion:absolute:
4、外层元素overflow:hidden;
5、外层元素 加float：left或display：inline-block
6、内层元素padding：1px;