margin 重叠

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都不存在，那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并。