兄弟关系外间距塌陷问题
现象:元素呈并列关系,在垂直方向相邻的margin外间距相遇,会出现叠加现象;
两个值一样大,取当前值
两个值不同,取较大值
原因:并列关系的两个元素共用了一个外间距区域
解决办法:
分别给这两个元素套一个父元素,并为父元素设置overflow:'hidden'
.box1 {
width: 100px;
height: 100px;
background-color: yellow;
margin-bottom: 50px;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
margin-top: 100px;
}
.father1,
.father2 {
overflow: hidden;
}
<div class="father1">
<div class="box1"></div>
</div>
<div class="father2">
<div class="box2"></div>
</div>