块状元素垂直外边距重叠

一、垂直外边距重叠

属于同一个BFC的两个相邻盒子，垂直margin会发生重叠

二、重叠外边距计算

1、如果都是正边界，边界宽度是相邻边界宽度中最大的值

2、如果出现负边界，则在最大的正边界中减去绝对值最大的负边界（正-|负|）

3、如果没有正边界，则从零中减去绝对值最大的负边界

 

三、示例

1、如果都是正边界，边界宽度是相邻边界宽度中最大的值

div1{height:200px;width:200px;margin : 100px}

div2{height:200px;width:200px;margin : 50px}

结构：

<div class=“DIV1"></div>

<div class=“DIV2"></div>

2、如果出现负边界，则在最大的正边界中减去绝对值最大的负边界（正-|负|）

div1{margin : 100px}

div2{margin : -50px}

边界=100px - |-50px|=50px

3、如果没有正边界，则从零中减去绝对值最大的负边界

div1{margin : -100px}

div2{margin : -200px}

边界=0 - |-200px|= -200px