margin 重叠
- 只发生在block元素上(不包括float、absolute、inline-block元素)
- 只发生在垂直方向上(不考虑writing-mode)
- margin的重叠发生可以发生在父子元素、兄弟元素和元素本身上
兄弟元素
表现为两个兄弟元素之间的margin会合并,并且按照较大margin宽度的计算布局
div{
width:100px;
height:100px;
}
#bro1{
margin-bottom:10px:
}
#bro2{
margin-top:20px;
}
父子元素
父子元素发生重叠主要针对于父元素和它的第一个子元素/最后一个元素
相对比相邻兄弟元素margin重叠来说,父子级margin重叠需要满足以下几个条件(以margin-top重叠为例):
- 父元素不形成BFC(块级格式化上下文)
- 父元素没有padding-top/bottom值
- 父元素没有border-top/bottom值
- 父元素和第一个子元素/最后一个元素之间没有inline元素分隔
另外针对最后一个元素还要满足条件:没有height、min-height、max-height
例子如上图(粉色为parent)
.parent{
width:800px;
height:600px;
}
.child{
width:400px;
height:200px;
margin-top:80px;
}
这时parent会收到child的影响,一起下移
元素本身
如果存在一个空的块级元素,其border、padding、inline content、height、min-height都不存在,那么此时它的上下边距中间将没有任何阻隔,此时它的上下外边距将会合并。