margin值的塌陷问题
并列关系的外间距塌陷
现象
-
并列关系的两个盒子在垂直方向相邻的margin 外间距相遇会出现叠加现象。两个值相同取当前值,两个值不同取较大值。
<div>
<div class="box1"><img src="images/1.jpg" alt=""></div>
<div class="box2"><img src="images/2.jpg" alt=""></div>
</div>
img{
width: 300px;
}
.box1{
width: 300px;
margin-bottom: 20px;
border: 2px solid red;
}
.box2{
width: 300px;
margin-top: 20px;
border: 2px solid black;
}
原因
-
并列关系的两个元素共用一个外间距区域
解决办法
-
分别为这两个元素添加一个父级盒,再给父级盒设置overflow: hidden;
-
<div> <div class="box"> <div class="box1"><img src="images/1.jpg" alt=""></div> </div> <div class="box"> <div class="box2"><img src="images/2.jpg" alt=""></div> </div> </div>
img{ width: 300px; } .box1{ width: 300px; margin-bottom: 20px; border: 2px solid red; } .box2{ width: 300px; margin-top: 20px; border: 2px solid black; } .box{ overflow: hidden; }
福利