块状元素垂直外边距重叠

一、垂直外边距重叠

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

块状元素垂直外边距重叠_第1张图片

二、重叠外边距计算

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

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

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

 

三、示例

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

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

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

结构:

=“DIV1">div>

=“DIV2">div>

块状元素垂直外边距重叠_第2张图片

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

div1{margin : 100px}

div2{margin : -50px}

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

块状元素垂直外边距重叠_第3张图片

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

div1{margin : -100px}

div2{margin : -200px}

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

块状元素垂直外边距重叠_第4张图片

你可能感兴趣的:(HTML,HTMl,前端,块状元素,垂直外边距重叠)