一、外边距塌陷共有两种情况

①第一种情况：

两个同级元素，垂直排列，上面的盒子给 margin-bottom 下面的盒子给

margin-top，那么他们两个的间距会重叠，以大的那个计算。

解决这种情况的方法为：两个外边距不同时出现

②第二种情况：

两个父子元素，内部的盒子给 margin-top，其父级也会受到影响，同时产生

上边距，父子元素会进行粘连。

解决这种情况的方法为：父级添加一个 css 属性，overflow：hidden，禁止超出外边距重叠就是外边距塌陷（margin-collapse）  

<style>* {margin: 0;padding: 0;}.box {width: 300px;height: 300px;background-color: pink;margin: 0 auto;}.box1 {width: 100px;height: 100px;background-color: red;margin-top: 100px;text-align: center;font: 18px/100px "楷体";}
</style>

解决方案：

1、为父盒子设置 border，为外层添加 border 后父子盒子就不是真正意义上的贴合（可以设置成透明：border：1px solid transparent）；

2、为父盒子添加 overflow：hidden；

3、为父盒子设定 padding 值；

4、为父盒子添加 position：fixed；

5、为父盒子添加 display：table；

6、利用伪元素给父元素的前面添加一个空元素

<style>* {margin: 0;padding: 0;}.box {width: 300px;height: 300px;background-color: pink;margin: 0 auto;/* 解决方案： *//* 1、为父盒子设置 border，为外层添加 border 后父子盒子就不是真正意义上的贴合（可 以设置成透明：border：1px solid transparent）； *//* border: 1px solid transparent; *//* 2、为父盒子添加 overflow：hidden； *//* overflow: hidden; *//* 3、为父盒子设定 padding 值； *//* padding: 1px; *//* 4、为父盒子添加 position：fixed； *//* position: fixed; *//* 5、为父盒子添加 display：table； *//* display: table; */}/* 6、利用伪元素给父元素的前面添加一个空元素 */.box::before {content: '';display: table;}.box1 {width: 100px;height: 100px;background-color: red;margin-top: 100px;text-align: center;font: 18px/100px "楷体";}</style>