CSS外边距塌陷（折叠）问题

外边距塌陷（折叠）

比如我们想要一个元素的下外边距有10px，而另一个元素的上边距是10px，那么这两个元素之间的空隙应该是20px。但是事实并不是如此，事实是只会显示10px。

css设计的初衷就是为了美观，而内边距塌陷（折叠）也就完美的解决了这个问题。

什么时候会出现外边距塌陷？

• 外边距塌陷是为了解决垂直方向上的缝隙而设计的。因为只会出现在垂直方向上。
• 只会发生在块级元素上，而不是行内元素，也不是行内块级元素

外边距计算

1. 正数 && 正数 ：取最大的数
2. 负数 && 负数 ：取绝对值最大的数
3. 正数 && 负数 ：相加的和

百思得解的例子

经常会遇见这个问题，想让子元素距离父元素的顶部有一段距离，但是设置了外边距却看不见效果，这下终于弄明白了。

例：我们想让元素A和元素C相隔10px，并且让元素B距离元素A顶部20px。

<div class="A">A元素div>
<div class="C">
        <div class="B">B元素div>
div>

.A{
     width: 300px;
     height: 60px;
     background-color: aquamarine;
}
.C{
     width: 300px;
     height: 100px;
     background-color: blueviolet;
}
.B{
     width: 300px;
     height: 30px;
     background-color: blanchedalmond;
}

给B元素和C元素添加外边距：

.A{
     width: 300px;
     height: 60px;
     background-color: aquamarine;
}
.C{
     width: 300px;
     height: 100px;
     background-color: blueviolet;
     margin-top: 10px;  /*添加*/
}
.B{
     width: 300px;
     height: 30px;
     background-color: blanchedalmond;
     margin-top:20px;  /*添加*/
}

• 这时会发现C元素和 A元素相距20px，这是因为20px>10pox的外边距的计算。
• 但是B元素还是紧贴着C元素的顶部，并没有距离C元素的顶部有20px。这是因为原来的B元素和C元素的外边距是重叠在一起的，所以其实他们都改变了，只是没有重叠了看不见而已。

解决方法：

1. 利用绝对定位

子绝父相：

.A{
     width: 300px;
     height: 60px;
     background-color: aquamarine;
}
.C{
     width: 300px;
     height: 100px;
     background-color: blueviolet;
     position: relative;  /*添加*/
     margin-top: 10px;  /*添加*/
}
.B{
     width: 300px;
     height: 30px;
     background-color: blanchedalmond;
     position: absolute;  /*添加*/
     margin-top:20px;  /*添加*/
}

2. 利用行内块级元素

因为行内块级元素不会发生外边距折叠的问题（这里A就不写了）

注意：使用这个方法要为行内块元素设置宽高。

.C{
     width: 300px;
     height: 100px;
     background-color: blueviolet;
     margin-top: 10px;  /*添加*/
}
.B{
     width: 300px;
     height: 30px;
     background-color: blanchedalmond;
     display: inline-block;  /*添加*/
     margin-top:20px;  /*添加*/
}

3. 利用相对定位

让子元素相对于原来的位置移动

.C{
     width: 300px;
     height: 100px;
     background-color: blueviolet;
     margin-top: 10px;  /*添加*/
}
.B{
     width: 300px;
     height: 30px;
     background-color: blanchedalmond;
     position: relative;  /*添加*/
     top:20px;  /*添加 注意这里是top*/
}

4. 浮动

不过这个方法对于居中不太适用

.B{
     width: 300px;
     height: 30px;
     background-color: blanchedalmond;
     float: left;  /*添加*/
     margin-top: 20px;  /*添加 注意这里是top*/
}

5. 利用BFC

创建BFC就不会发生和子元素外边距叠加的情况。

不过如果利用的是overflow：hidden。那就会隐藏掉溢出的部分。

.C{
     width: 300px;
     height: 100px;
     background-color: blueviolet;
     margin-top: 10px;  /*添加*/
     overflow: hidden;  /*添加*/
}
.B{
     width: 300px;
     height: 30px;
     background-color: blanchedalmond;
     margin-top: 20px;  /*添加 注意这里是top*/
}

6. 设置内边距或边框

设置了内边距或边框，就相当于把父子元素的外边距分开了，这样就不会发生外边距重叠的问题了。

.C{
     width: 300px;
     height: 100px;
     background-color: blueviolet;
     margin-top: 10px;  /*添加*/
     padding-top: 20px;  /*添加*/
    /*border-top:1px solid yellow*/
}
.B{
     width: 300px;
     height: 30px;
     background-color: blanchedalmond;
     /*margin-top:20px;*/
}

7.设置空元素