css margin边距重合问题

margin与margin  外边距与外边距重叠

两个div正常排列

<div class='d1'></div>
<div class='d2'></div>

两个元素top，bottom边距重叠情况

第一种情况

　　d1的margin-bottom：-20px，

　　d2的margin-top：30px时，d1和d2的边距为30+（-20)px,当两个元素相对边距为正负数时，它们之间的实际外边距为相对边距相加之和：10px

第二种情况

　　d1的margin-bottom：20px，

　　d2的margin-top：30px，d1和d2的边距为30px，当两个元素相对边距都为正数时，取最大值

第三种情况

　　d1的margin-bottom：-20px，

　　d2的margin-top：-30px，d1和d2的边距为-30px，当两个元素相对边距都为负数时，取最小值

left，right重叠情况

　　不管实在float，还时flex、inline-block下

　　d1与d2的margin-left和margin-right重叠时，两个元素的实际边距为margin-left + margin-right

margin与padding 外边距与内边句重叠

元素排列如下

 <div class="w1">
        <div class="d1 d"></div>
 </div>
 <div class="w2">
        <div class="d2 d"></div>
 </div>

第一种情况

　　当d1的margin-bottom：50px时，且w1的对应内边距padding-bottom为0时，

　　

　你可以视为，d1的margin-bottom发生了穿透，等效为w1的margin-bottom：50px

第二中情况

　　当d1的margin-bottom：50px，且w1的padding-bottom大于0时列入padding-bottom：1px；

　　

　　等效为w1的padding-bottom：（50+1）px

以上情况在ie，firefox，chrome中测试一致，且box-sizing：content-box与border-box测试一致