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都不存在，那麼此時它的上下邊距中間將沒有任何阻隔，此時它的上下外邊距將會合並。