盒子模型的外边距塌陷和合并问题及解决方案

最新推荐文章于 2025-04-28 12:20:34 发布

转载最新推荐文章于 2025-04-28 12:20:34 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000017301996

本文详细解析了CSS布局中常见的外边距塌陷与合并现象，阐述了其成因及三种有效应对策略：添加父级元素内边距、边框或使用overflow属性。并强调了合理运用padding代替margin的重要性。

外边距塌陷:

         当嵌套的两个块元素,给子盒子加向上的外边距时,父盒子会跟着掉下来,此时就是外边距塌陷.
          解决方案:
         1.给父盒子加padding
         2.给父盒子加上边框
         3.给父元素加overflow:hidden 属性
         
         当同一个效果能用padding解决就最好不用margin解决

注意：盒子在网页中所占地面积=自身宽高+内边距+边框+外边距

外边距合并:
当垂直排列的两个块元素,同时给上面的盒子加向下的外边距,给下面的盒子加向上的外边距,此时会造成外边距合并,当数值相同的时候,就是那个值,当值不同的时候,取最大的那个值