通常特性:
1.block水平元素(不包括float和absolute元素)
2.不考虑writing-mode,只发生在垂直方向(margin-top、margin-bottom)
三种情境:
1.相邻的兄弟元素
2.父级和第一个/最后一个子元素
3.空的block元素 自己和自己
1.相邻的兄弟元素 margin重叠
![](https://img.haomeiwen.com/i1911883/09e60130dc90835c.png)
2父级和第一个/最后一个子元素
![](https://img.haomeiwen.com/i1911883/215947d35d32c9de.png)
margin-top:
father 0,son 80,重叠一下,80
father 80,son 80 ,重叠一下,80
2.1父子元素margin-top发生重叠,原因?如何取消重叠?
1.父元素非块状格式化上下文元素
![](https://img.haomeiwen.com/i1911883/7c8731fd5c0ac451.png)
2.父元素没有border-top设置
![](https://img.haomeiwen.com/i1911883/9724f5533616d619.png)
3.父元素没有padding-top值
4.父元素和第一个子元素之间没有inline元素(图片。。文字。。。)分割
![](https://img.haomeiwen.com/i1911883/48d29dd22bede5e4.png)
margin-bottom重叠的原因:
1.父元素非块状格式化上下文元素
2.父元素没有border-bottom设置
3.父元素没有padding-bottom值
4.父元素和最后一个子元素之间没有inline元素分割
5.父元素没有height、min-height、max-height限制
3.空block元素margin重叠
![](https://img.haomeiwen.com/i1911883/9b935a2a685f8504.png)
margin重叠的计算规则
1.正正取大值
![](https://img.haomeiwen.com/i1911883/a47a0c0c8eb86861.png)
2.正负值相加
3.负负最负值
![](https://img.haomeiwen.com/i1911883/44165111e91e2182.png)
垂直布局时,margin-top和margin-bottom都使用
![](https://img.haomeiwen.com/i1911883/9aa84f8bfcc1ad36.png)
网友评论