margin collapsing
Margin collapsing only occurs with top and bottom margins, left and right margins don’t collapse.
margin
有個重要的特性,叫做「邊距重疊」(margin collapsing),意思是兩個或多個元素 (父子、兄弟) 的「垂直邊距」會自動組合成單個邊距。重疊邊距採用最大的 margin 值,此外如果元素本身高度為 0 或 auto,則會發生上下 margin 重疊狀況。 👉 Margin Collapsing
不過在下列的情形中,元素不會發生邊距重疊:
父元素有設定 padding 或 border 的寬度。
margin collapsing does not work on margin-left and -right, just on -top and -bottom.
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
參考
Last updated