如何解决垂直方向的margin重叠

最新推荐文章于 2023-02-05 16:03:14 发布

weixin_42182143

最新推荐文章于 2023-02-05 16:03:14 发布

阅读量427

点赞数

本文链接：https://blog.csdn.net/weixin_42182143/article/details/98682539

版权

两个或多个块级盒子的垂直相邻边界会重合。
就是这样：

<style>
.container {
    margin: 30px auto;
    width: 600px;
    height: 300px;
}
.p {
    border: solid 3px #a33;
    }
.c {
    width: 100px;
    height: 100px;
    background-color: #060;
    margin: 10px;
}
</style>
<body>
  <div class="container">
    <div class="p">
      <div class="c"></div>
      <div class="c"></div>
      <div class="c"></div>
    </div>
  </div>
</body>

image.png

可以看到，他们是非bfc区域。这里盒子的margin，数学计算应该是10+10的，而实际上发生了盒子上下margin重合，盒子之间的margin只有10了。

margin重叠的时候，最终的margin值计算方法如下：

a、全部都为正值，取最大者；
b、不全是正值，则都取绝对值，然后用正值减去最大值；
c、没有正值，则都取绝对值，然后用0减去最大值。
注意：相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。

外层元素padding代替
外层元素 overflow:hidden;
内层元素绝对定位 postion:absolute:
内层元素加float:left;或display:inline-block;
内层元素padding:1px;
内层元素透明边框 border:1px solid transparent;

weixin_42182143

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何解决垂直方向的margin重叠

两个或多个块级盒子的垂直相邻边界会重合。就是这样：<style>.container { margin: 30px auto; width: 600px; height: 300px;}.p { border: solid 3px #a33; }.c { width: 100px; ...
复制链接

扫一扫