外边距塌陷有两种情况

第一种

两个同级元素,垂直排列,上面的盒子给margin-bottom 下面的盒子给margin-top,那么他们两个的间距会重叠

第二种

两个父子元素,内部的盒子给margin-top,其父级也会收到影响,同时产生上边距,父子元素会进行粘连

解决方法

1.给父子设置border,把border设为透明色,1px

2.为父盒子添加overflow:hidden

3.为父盒子设padding值

4.为父盒子添加固定定位

5.为父盒子添加display:table