如何解决“margin”塌陷？_css 禁止margin塌陷

作者：花生_TL007 | 2024-02-22 06:45:56

踩

css 禁止margin塌陷

外边距塌陷共有两种情况：

第一种情况：两个同级的元素，垂直排列，上面的盒子给margin-bottom，下面的盒子给margin-top，那么他们两个间距就会重叠，以大的那个盒子计算。

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

第二种情况：两个父子元素，子元素给一个margin-top，其父级元素也会受到影响，同时产生上边距，父子元素会进行粘连。

解决这种情况的方法：给父级元素添加一个css属性，overflow：hidden，禁止超出。

解决方案：

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

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

3、为父盒子设置padding值；

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

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/128940