外边距塌陷(折叠)
比如我们想要一个元素的下外边距有10px,而另一个元素的上边距是10px,那么这两个元素之间的空隙应该是20px。但是事实并不是如此,事实是只会显示10px。
css设计的初衷就是为了美观,而内边距塌陷(折叠)也就完美的解决了这个问题。
什么时候会出现外边距塌陷?
- 外边距塌陷是为了解决垂直方向上的缝隙而设计的。因为只会出现在垂直方向上。
- 只会发生在块级元素上,而不是行内元素,也不是行内块级元素
外边距计算
- 正数 && 正数 :取最大的数
- 负数 && 负数 :取绝对值最大的数
- 正数 && 负数 :相加的和
百思得解的例子
经常会遇见这个问题,想让子元素距离父元素的顶部有一段距离,但是设置了外边距却看不见效果,这下终于弄明白了。
例:我们想让元素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;*/
}