iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 17
1
Modern Web

重新認識 CSS系列 第 17

重新認識 CSS - Collapsing margins

前言

「重新認識 CSS」這個系列名稱的由來就如其名,我想要重新認識它。雖然以前就有學過 CSS,但這次想從 CSS Spec 中學到最原始的定義和內容,更加了解 CSS 的原理,讓我在切版的時候可以更加確定自己在做什麼,我踩到的雷只是因為我不夠了解它才會炸開。

在這 30 天的內容中,會將 Spec 內看到的資料整理成這個系列,也希望正在學 CSS 的各位可以更加了解它。另外我也會同時將文章發至我的 Blog,如果想直接看文內的程式碼 Demo 畫面,可以到我的 Blog 來看 ?。

「重新認識 CSS」系列文章發文於:

兩個 box 之間的 margin 相鄰 (adjoining) 時,可能會讓 margin 發生合併,這個現象就被稱為 Collapsing margin,而合併的 margin 就被稱為 collapsed margin。

在下列這些情況會發生 collapsed margin:

  • 兩個 block 都是 in-flow block-level box,且參與相同的 BFC
  • 兩個 block 沒有 line box、clearance、padding 或沒有 border 將它們的 margin 隔開
  • 垂直相鄰的 box edge:
    • box 的 margin-top 和第一個 in-flow 子元素的 margin-top
    • box 的 margin-bottom 和下一個 in-flow 之後的 sibling 的 margin-top
    • 最後一個 in-flow 子元素的 margin-bottom 和其父元素的 margin-bottom,且父元素的高度為 auto
    • 未建立新的 BFC,且 min-height 為 0、heightauto,且沒有 in-flow children 的 box 的 margin-topmargin-bottom

而下面這些情況不會發生 collapsing margin:

  • root 元素的 box 的 margin
  • clearance
  • 水平的 margin
  • 建立新的 BFC (block formatting context) 的元素的 margin 不會與 in-flow 的子元素 collapse,例如:float 的元素、overflow 屬性值不為 visible 的元素
  • position: absolute 的元素的 margin
  • inline-block box 的 margin

資料來源:


上一篇
重新認識 CSS - box-sizing
下一篇
重新認識 CSS - Containing block
系列文
重新認識 CSS30

1 則留言

0
mihuartuanr
iT邦新手 5 級 ‧ 2019-10-10 15:01:43

而下面這些情況不會發生 collapsed margin:

root 元素的 box
clearance

是不是忽略了不同的BFC…

我要留言

立即登入留言