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

外边距塌陷:

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


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

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

    原文作者:皇朝洋
    原文地址: https://segmentfault.com/a/1190000017301996
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞