margin塌陷如何解决

导致边距塌陷的两种情况:

1. 同级元素塌陷

两个同级元素，垂直排列。上面的盒子给了margin-bottom，下面的盒子给了margin-top。那么这两个边距将会重叠，按照大的值来计算。

 

此时两个盒子，father设置了20px的下边距，son设置了30px的上边距，但是最终两个盒子之间的边距为30px 只保留了最大的值son的上边距。

解决办法：简单粗暴——不让这两个边距同时出现。

2. 父子元素塌陷

两个父子元素，内部的子盒子给了margin-top，父元素也会受到影响，同时产生上边距，也就是父子重合（粘连）。

 

 

解决方法：

1 ：给父盒子设置border，添加border后父盒子和子盒子就不会贴在一起了

这里可以给边框颜色设置为透明色 这样不会影响效果

 

 

2 给父盒子添加overflow：hidden  让他溢出隐藏

 

 

3 给父盒子设定padding值 

注意：此方法会撑大父盒子

 

 

4 给父盒子添加position：fixed 

 

 

 方法不全 感兴趣的可以去查阅更多资料 谢谢大家！