CSS中的塌陷问题

---

前言

学习前端的小伙伴是否经常能碰到在设置两个盒子与盒子之间边距的时候，明明上下外边距都设置了，但最终的外边距却不是他们两者之和呢？而是其中的最大的外边距值呢？下面我们一起来看看到底发生了什么，莱斯狗~~

---

1、外边距塌陷

在前言中出现这个问题的原因是盒子与盒子之间的外边距发生了合并现象，也就是我们常说的外边距塌陷，外边距塌陷问题并不是设计时产生的bug，他在一些场景下也是很有帮助的，下面举个例子：

    比如我设置一个页面，上面一张图片下面一张图片，中间三段话，我需要给文字上下设置相等的20像素间距，并且让文字与图片之间也产生20px的距离

    此时我们可以利用外边距塌陷的特性，只需要在文字标签里设置margin-top: 20px;和 margin-bottom: 20px;，而不用担心文字之间产生40px距离，如下图

    这就是外边距塌陷带来的好处，当然，在我们不需要外边距塌陷这个效果的时候，我们该如何去解决这个外边距塌陷问题呢？在解决这个问题之前我们需要明白，在什么时候会出现这个外边距塌陷效果以及外边距是如何进行计算的

2、外边距坍塌的条件

2.1、 垂直方向，但水平方向不会出现塌陷现象；
2.2、块级元素，而行内元素和行内块级元素都不会触发；

3、外边距计算

3.1、正数&&正数 取最大值

3.2、负数&&负数 取绝对值最大值

3.3、正数&&负数 相加的和

可以利用这个特性让盒子居中

4、边距塌陷问题的解决

4.1、从上图可以看到，当我给d3设置上外边距为20px的时候，父级即d2也会跟着往下挪动20px，这就是塌陷，我们可以通过加定位来解决

另外我们也可以直接给子级添加相对定位，然后通过方位属性进行移动（不要用margin-top）也是可以解决塌陷问题的，这里注意的是在给外面大盒子加外边距的时候还是会出现塌陷问题，这是因为相对定位是参考自身进行移动的，移动之后还占着原来的位置，原来位置还在那里，还是会导致像前言所说的出现塌陷效果。

4.2、同样，我们也可以通过转换行内块元素来解决外边距塌陷问题

4.3、设置浮动也能解决塌陷问题，浮动给父或子加都是没有问题的哈

4.4、添加溢出隐藏，触发BFC也是可以取消塌陷效果的

4.5、通过添加内边距也是可以解决塌陷问题的，当然这里需要注意的是盒子在设置了固定的高度下，再设置内边距，会出现把盒子撑大的情况，这时我们就要使用怪异盒模型来保持盒子原来的大小，也就是我们通常所说的自动内减

4.6、添加边框也是能解决上下外边距塌陷的问题，在这里我给父盒子设置了一条透明的边框将父子元素分开，当然这里也多了1px的高度，有影响吗？确实有影响，但不是很大，你甚至可以将边框高度设置得更小，总之有就行

---

总结

外边距塌陷在特定场合下也是有其特效的，当然，在开发过程中我们不可避免地会碰到外边距塌陷给我们带来的麻烦，这里就简单总结下解决外边距塌陷问题的几种方法：

1. 添加定位，子绝父相，也可以直接给子级添加相对定位，通过方位属性进行移动，但需要注意此时的父级与兄弟盒子仍然存在塌陷问题
2. 改变标签显示模式，转行内块，父或子都行
3. 添加浮动，父或子都行
4. 给父级添加溢出隐藏，触发BFC也是可以取消塌陷效果的
5. 给父级添加内边距（可设置自动内减保持盒子原来大小）
6. 给父级设置边框

注意：方法六和七都会撑大盒子