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><!-- 有负的外边距时,取负值最小的外边距与最大的外边距相加,即公共的外边距 -->

 

posted on 2017-04-05 01:05  周裕涛  阅读(583)  评论(0)  编辑  收藏  举报

导航