外边距margin合并问题

最新推荐文章于 2022-09-24 12:11:54 发布

颖_恋

最新推荐文章于 2022-09-24 12:11:54 发布

阅读量274

点赞数

分类专栏：样式设置复习文章标签：垂直外边距合并

本文链接：https://blog.youkuaiyun.com/line233/article/details/90142052

版权

复习同时被 2 个专栏收录

7 篇文章

订阅专栏

样式设置

6 篇文章

订阅专栏

第一种情况：相邻元素垂直外边距合并问题

<div class="div1">
</div>
<div class="div2">
</div>

现在有两个垂直排列的盒子，我们设置了上边盒子的下外边距为100px，下边盒子的上外边距为50px，想要实现两个盒子的垂直边距为150px，但实际上两个盒子垂直方向上的外边距发生了重合，实际边距取了两者margin之间的最大值

解决方案如下：

1. 避免使用这种写法，要么设置上边元素的下边距，要么设置下边元素的上边距，不要同时设置，即可以设置第一个盒子的margin-bottom为150px，也可以设置第二个盒子的margin-top为150px

2. 将其中一个盒子包裹在一个div中，使用这个div去触发BFC，设置该div的样式为overflow:hidden，不明白的话可以参考下面的代码

<style>
        .div1 {
            width: 200px;
            background-color: pink;
            height: 199px;
            margin-bottom: 100px;
        }
        .div2 {
            width: 200px;
            height: 200px;
            margin-top: 50px;
            background: purple;
        }
        .bfc {
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="div1">
</div>
<div class="bfc">
    <div class="div2">
    </div>
</div>

使用以上任何一种解决方案既可以实现两个盒子的垂直边距为150px

第二种情况：

嵌套的两个块元素出现垂直外边距合并问题。

<div class="father">
    <div class="child">

    </div>
</div>

我们要实现子元素距离父元素上边框50px，正常有两种解决方案，一种是使用父元素的内边距padding，一种是使用子元素的外边距margin，但是当设置子元素的margin为50px后出现了下面这种神奇的现象，父元素有了50px的上外边距，而子盒子的上边距仍然与父元素重合。

解决方案如下：

1. 给父元素设置非零px的上边框或者内边距

border-top: 1px solid pink; 或者 padding-top: 1px;

2. 为父元素设置overflow:hidden，触发BFC，这样就不会影响元素外部布局

使用以上任何一种解决方案以后，效果如下