CSS中的外边距合并问题（外边距塌陷）

margin

margin指外边距，是盒子模型的组成之一（盒子=内容+边框+外边距+内边距），类似于表格中的cellspacing，具体用法如下：

• 一个值时，指定上右下左的外边距
• 两个值时，第一个值为上下外边距，第二个值为左右外边距
• 三个值时，第一个值为上外边距，第二个值为左右外边距，第三个值为下外边距
• 四个值时，分别对应上、右、下、左四个外边距
• 也可以单独设置，如margin-left，margin-top等

<div class="box"></div>
<div class="box1"></div>
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color:rosybrown;
  }
  .box1 {
    width: 100px;
    height: 100px;
    background-color: teal;
    margin-top: 50px;
  }
</style>

效果图为

外边距合并问题

外边距合并问题也称为外边距塌陷，大致有以下两种情况

1，相邻块元素之间的塌陷问题

比如两个垂直排列的元素，上一个元素设置了下外边距，而下面一个元素同时也设置了上外边距，一开始我们肯定会想当然的认为两个元素的距离肯定是两者之和，然而并不是，实际的距离应该是两者之间更大的那一个，这就是外边距塌陷问题。

此时肯定有人疑问怎么解决，其实解决办法也很简单，那就只设一个就可以了，要么只设上外边距，要么就只设置下外边距，不要多此一举就行。

2，嵌套块元素之间的塌陷问题

这是外边距合并的另一种情况，出现在父子元素之间，当父元素没有边框，且没有设置内边距时，如果里面的子盒子设置了上外边距，理论上是可以设置与父盒子之间的边距，但实际情况却不然，具体看下

<div class="father">
  <div class="son"></div>
</div>
<style>
  .father {
    width: 200px;
    height: 200px;
    background-color: teal;
  }
  .son{
    width: 100px;
    height: 100px;
    margin: 0 auto;
    margin-top: 30px;
    background-color: rosybrown;
  }
</style>

效果图如下

可以看到，实际情况并非是子盒子与父盒子之间有了间距，反而间距作用到了父盒子身上，这就是嵌套元素之间的外边距塌陷，当父盒子也具有外边距时，会取两者之间更大的哪一个

针对这种情况有几种不同的解决办法

• 给父盒子设置一个上边框
• 想让父盒子与子盒子之间有间距，直接给父盒子设置内边距来实现，不要使用外边距
• 让父盒子形成一个BFC 区域

此处额外提一句BFC区域，简单来讲，BFC区域就是让里面的内容不再影响到外界，父盒子形成了BFC，子盒子的外边距自然无法影响外界。形成BFC区域也有几种不同的办法

1. 浮动
2. 固定定位和绝对定位
3. overflow:hidden
4. display:table