如何解决垂直方向的margin重叠
2019-08-06 本文已影响0人
haha2333
两个或多个块级盒子的垂直相邻边界会重合。
就是这样：
<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;
