详解 CSS 外边距重叠(外边距塌陷)问题及解决办法

外边距重叠也可以称之为外边距塌陷
如果目的是让一些元素垂直方向间距相同，那么外边距重叠用起来就真的很香，不需要再担心两者的外边距叠加问题。
外边距重叠就像字面意思一样，不同元素上下边距重叠到一起了。
官方一点解释就是：

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

一、哪些元素会发生外边距重叠问题 ？？？

从官方的解释上我们可以看到是块元素的 上下外边距 ，所以说明只有 块元素 会发生外边距重叠，行内元素 和 行内块元素 都不会发生外边距重叠问题

二、什么情况下会发生外边距重叠呢 ？？？

造成外边距重叠有 三种情况：

第一种情况：发生在同一层相邻元素之间

<div id="#box1"></div>
<div id="#box2"></div>
<style>
  #box1{
      width: 200px;
      height: 200px;
      background: lemonchiffon;
      margin-bottom: 50px;
    }
    #box2{
      width: 200px;
      height: 200px;
      background: lightcoral;
      margin-top:100px ;
    }
    </style>

发生边界重叠，只会挑选最大边界范围留下，所以两者之间的边距为100px
如果需要解决这个边界重叠问题，则需在后一个元素加上float

第二种情况：没有内容将父元素和后代元素分开
举个例子：

<div>
	<p></p>
</div>
<style>
#box1{
      width: 200px;
      height:200px;
      background:lightseagreen;
    } 
    #box2{
      width: 100px;
      height:100px;
      background:darkgoldenrod;
      margin-top:50px ;
    } 
</style>

从代码可以看出我们目的是想让子元素距离父元素的顶部100px，可惜结果总是在意料之外，父级会和子级移动，距离顶部100px。

那有没有什么办法让他们分开呢？

方法一：给父元素加overflow：hidden；
这种方法解决了我们外边距重叠问题，但是这个方法只适用于 “子元素的高度加上外边距高度小于父元素高度(childHeight +margin-top<parentHeight)” ，不然子元素部分内容就会被隐藏掉

<div>
	<p></p>
</div>
<style>
#box1{
      width: 200px;
      height:200px;
      background:lightseagreen;
      //新添加
      overflow:hidden;
    } 
    #box2{
      width: 100px;
      height:100px;
      background:darkgoldenrod;
      margin-top:50px ;
    } 
</style>

方法二：给父元素加边框 border
父子元素是外边框重叠到一起去了 ，那么我们给父元素加个边框，他们的外边距就有了边框的间距，但是这样也就多出来没有必要的边框

<div>
	<p></p>
</div>
<style>
#box1{
      width: 200px;
      height:200px;
      background:lightseagreen;
      //新添加
      border:1px solid lightseagreen;
    } 
    #box2{
      width: 100px;
      height:100px;
      background:darkgoldenrod;
      margin-top:50px ;
    } 
</style>

方法三：给父级或者子级设置display:inline-block;
既然只有块元素会产生外边距重叠，那么我们就让它不是块元素，把它设置为行内块元素

<div>
	<p></p>
</div>
<style>
#box1{
      width: 200px;
      height:200px;
      background:lightseagreen;
      //display:inline-block;
    } 
    #box2{
      width: 100px;
      height:100px;
      background:darkgoldenrod;
      margin-top:50px ;
      //新添加
      display:inline-block;
    } 
</style>

方法四：给父级或者子级设置float

<div>
	<p></p>
</div>
<style>
#box1{
      width: 200px;
      height:200px;
      background:lightseagreen;
      //float:left;
    } 
    #box2{
      width: 100px;
      height:100px;
      background:darkgoldenrod;
      margin-top:50px ;
      //新添加
      float:left;
    } 
</style>

方法五：给父级或者子级设置position: absolute;

<div>
	<p></p>
</div>
<style>
#box1{
      width: 200px;
      height:200px;
      background:lightseagreen;
      //position:absolute;
    } 
    #box2{
      width: 100px;
      height:100px;
      background:darkgoldenrod;
      margin-top:50px ;
      //新添加
      position:absolute;
    } 
</style>

方法六：给父元素添加padding

<div>
	<p></p>
</div>
<style>
#box1{
      width: 200px;
      height:200px;
      background:lightseagreen;
      //新添加
      padding:10px;
    } 
    #box2{
      width: 100px;
      height:100px;
      background:darkgoldenrod;
      margin-top:50px ;
    } 
</style>

第三种情况：空的块级元素

  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
  <style>
 #box1{
      width: 200px;
      height:200px;
      background:lightseagreen;
      margin-bottom:20px ;
    } 
    #box2{
      margin-top: 20px;
      margin-bottom:20px ;
    }
    #box3{
      width: 200px;
      height:200px;
      background:darkgoldenrod;
      margin-top:20px ;
    }  
</style>

中间的间隔只有20px,不会产生叠加，只会取最大的那个值

三、外边距重叠是怎么算的 ？？？

1. 两个正数取最大的数
2. 两个负数取绝对值最大的数
3. 一正一负取两者之和