margin collapsing

Margin collapsing only occurs with top and bottom margins, left and right margins don’t collapse.

margin 有個重要的特性,叫做「邊距重疊」(margin collapsing),意思是兩個或多個元素 (父子、兄弟) 的「垂直邊距」會自動組合成單個邊距。重疊邊距採用最大的 margin 值,此外如果元素本身高度0auto,則會發生上下 margin 重疊狀況。 👉 Margin Collapsing

不過在下列的情形中,元素不會發生邊距重疊:

  • 父元素有設定 paddingborder 的寬度。

  • margin collapsing does not work on margin-left and -right, just on -top and -bottom.

  • 屬於「不同的 BFC 內」的元素,例如:

    • position 使用 absolute、fixed 的元素。

    • 元素間穿插了 BFC 元素,例如 inline、table...等。

    • display 屬性為 inline-block、table-cell、table-caption 的元素。

    • display 屬性為 flex、inline-flex、grid、inline-grid 的元素。

preventing margins from collapsing

  • the margins of flexbox items don’t collapse.

  • if you add top and bottom padding/border to the parent container, the margins inside it won’t collapse to the outside.

  • applying overflow: auto (or any value other than visible) to the container prevents margins inside the container from collapsing with those outside the container.

  • elements with display: table-cell don’t have a margin, so they won’t collapse, this also applies to table-row and most other table display types. (exceptions: table, table-inline, and table-caption)

margins between elements

/* 
    use adjacent sibling combinator (+) 
    to apply a margin between buttons 
*/
.button + .button {
    margin-block-start: 0.5em;
}

參考

Last updated