LESSON-05 · TOPIC 03
能辨識相鄰 block 的垂直 margin 可能合併，並知道建立新的 block formatting context 可阻止父子 margin 穿出。
能辨識相鄰 block 的垂直 margin 可能合併，並知道建立新的 block formatting context 可阻止父子 margin 穿出。
若把合併後間距誤當成加總，會不停增加 margin 或插入空元素，造成不同區塊的節奏失控。
要修改的檔案：files/starter/style.css
定位：先讀 section 與 h2 的 getBoundingClientRect().top，不先加 padding。｜依 starter-3 定位，只修改「margin collapse」的責任。
先結果，再原理；完成後要能說出自己看見的證據。
區塊第一個 h2 的 margin-top 看似把整個 section 推開，而不是只在 section 內留白。
起始狀態：section 是一般 block，第一個 h2 有 32px margin-top，父層沒有 border/padding。
runtime 的 display 由 block 變 flow-root；人工量測能指出切換前後父子 margin 是否仍穿出容器。
驗收證據：runtime before=block、after=flow-root；人工證據記錄父層與 h2 的 rect.top 差值
區塊上下距離與兩個 margin 數值加總不同，或第一個子元素 margin 看似跑到父層外時。
常見混淆：Flex/Grid item 的 margins 不會以相同規則 collapse；gap 也不是 margin collapse。
這段程式是理解起點，不是要你直接跳過 Starter。
兩個垂直外距有時會疊成一個，不是永遠相加；flow-root 像替容器建立自己的排版邊界。
正式說法：在 block formatting context 中，特定相鄰 block-level boxes 的垂直 margins 會 collapse；建立新的 BFC 可阻止父子 margin collapse。
.section { display:flow-root; } .section > h2 { margin-top:2rem; }每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
檔案：files/starter/style.css 定位：先讀 section 與 h2 的 getBoundingClientRect().top，不先加 padding。
要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「先讀 section 與 h2 的 getBoundingClientRect().top，不先加 padding。」目前的缺口。
證據：保存 files/starter/style.css 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/style.css，且定位到 先讀 section 與 h2 的 getBoundingClientRect().top，不先加 padding。。
檔案：files/starter/style.css 定位：先讀 section 與 h2 的 getBoundingClientRect().top，不先加 padding。
要做：執行實驗替父層切換 establish-bfc，確認 computed display 由 block 變 flow-root，再用 rect 量測父子上緣。
預期：runtime 的 display 由 block 變 flow-root；人工量測能指出切換前後父子 margin 是否仍穿出容器。
證據：runtime before=block、after=flow-root；人工證據記錄父層與 h2 的 rect.top 差值
卡住先查：先讀 section 與 h2 的 getBoundingClientRect().top，不先加 padding。
檔案：files/starter/style.css 定位：先讀 section 與 h2 的 getBoundingClientRect().top，不先加 padding。
要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：runtime 的 display 由 block 變 flow-root；人工量測能指出切換前後父子 margin 是否仍穿出容器。
證據：runtime before=block、after=flow-root；人工證據記錄父層與 h2 的 rect.top 差值
卡住先查：先讀 section 與 h2 的 getBoundingClientRect().top，不先加 padding。
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
說明內容
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
先確認這是垂直 block margin；水平 margin 不會這樣 collapse。
切換 display:flow-root 建立新的 block formatting context。
完整解答與原因：一般 block 的父子垂直 margin 可能合併；flow-root 建立新 BFC，讓子元素 margin 留在容器排版邊界內。