CSS外边距合并问题

今天上前端课做练习的时候遇到了外边句合并的问题,当时没想起来是外边距合并的问题,浪费了很多时间,最后还是老师提醒,才想起来

外边距合并问题是前端开发经常遇到的问题,在开发中主要有两种情况。

  • 相邻块级元素垂直外边距的合并
  • 嵌套块级元素垂直外边距的塌陷

相邻块级元素垂直外边距合并

可见,同时拥有margin值的两个盒子,取其中较大值。所以在开发中,只设置一个值即可避免相邻块级元素垂直外边距合并


嵌套块级元素垂直外边距的塌陷


可见,两个嵌套关系的块级元,子元素的上外边距会影响父元素的上外边距。当父元素没有上外边距时,给子元素设置上外边距,父元素会跟着一起塌陷下来;当父元素和子元素都有上外边距的时候,父元素会塌陷较大值的上外边距。
解决办法:

  • 为父元素定义一个上边框
  • 为父元素定义上内边距
  • 为父元素添加overflow: hidden
<style>
        * {
            margin: 0;
            padding: 0;
        }
        .bigbox {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin-top: 100px;
            /* 方案一:为父元素定义一个上边框 */
            /* border-top: 1px solid transparent; */
            /* 方案二:为父元素定义上内边距 */
            /* padding-top: 1px; */
            /* 方案三:为父元素添加overflow: hidden */
            overflow: hidden;
        }
        .box {
            width: 300px;
            height: 300px;
            background-color: greenyellow;
            margin-top: 150px;
        }
    </style>

以上任意一个方案都可以解决嵌套块级元素垂直外边距塌陷的问题

发布日期:
分类:csshtml

作者:BYBOY

江湖没有他的传说!

发表评论

您的电子邮箱地址不会被公开。