CSS外边距塌陷(折叠)问题

外边距塌陷(折叠)

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

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

CSS外边距塌陷(折叠)问题_第1张图片

什么时候会出现外边距塌陷?
  • 外边距塌陷是为了解决垂直方向上的缝隙而设计的。因为只会出现在垂直方向上
  • 只会发生在块级元素上,而不是行内元素,也不是行内块级元素
外边距计算
  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;
}

CSS外边距塌陷(折叠)问题_第2张图片

给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;  /*添加*/
}

CSS外边距塌陷(折叠)问题_第3张图片

  • 这时会发现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;  /*添加*/
}

CSS外边距塌陷(折叠)问题_第4张图片

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.设置空元素

你可能感兴趣的:(css3,css)