CSS中外边距重叠的问题
相邻的两个或多个外边距会合并成一个外边距,当同为正的,取最大的外边距,当有正负时,取最小的外边距加上最大的外边距,这里的相邻指的是外边距的相邻:
<div style="width:100px;height:100px;background-color:red;margin-bottom:20px;border:1px solid red"></div> <div style="width:100px;height:100px;background-color:yellow;margin-top:10px"></div>
<!-- 外边距合并 --> <br><br> <div style="border:1px solid red;width:100px"> <div style="margin-top:50px;background-color:green;height:50px;width:50px"> <div style="margin-top:100px">B</div> </div> </div>
<!-- 外边距合并 -->
<br><br> <div style="border:1px solid red;width:100px">
<div style="margin-top:50px;border:1px solid blue;background-color:green;height:50px;width:50px">
<div style="margin-top:100px">B</div>
</div>
</div><!-- 外边距不合并,因为有边框隔开,两个外边距不相邻-->
<br><br>
<div style="border:1px solid red;width:100px">
<div style="margin-top:-50px;background-color:green;height:50px;width:50px">
<div style="margin-top:100px">B</div>
</div>
</div><!-- 有负的外边距时,取负值最小的外边距与最大的外边距相加,即公共的外边距 -->