CSS 外層 div 邊距塌陷：margin-top 導致父元素下移的解決方案

`。給 `.child` 設定 `margin-top: 20px`，結果**父元素 `.parent` 連同整體向下移動 20px**，而非子元素在父元素內向下移動。這就是經典的 **Margin Collapsing (外邊距塌陷/合併)**。

根本原因

根據 CSS 盒模型規範，**相鄰的垂直外邊距會合併**。當父元素**沒有 Padding、Border、Block Formatting Context (BFC) 觸發條件**時，子元素的 `margin-top` 會「穿透」父元素，與父元素的 `margin-top` 合併，表現為父元素被頂下去。

解決方案 (任選一)

方法	CSS 代碼	原理	副作用/注意
父元素加 Border	`.parent { border: 1px solid transparent; }`	Border 阻隔外邊距合併	佔用 1px 空間，可用 `box-sizing: border-box` 或負 margin 抵消
父元素加 Padding	`.parent { padding-top: 1px; }`	Padding 阻隔外邊距合併	增加內部空間，需調整內部佈局
父元素觸發 BFC (推薦)	`.parent { overflow: hidden; }` 或 `display: flow-root;` (現代瀏覽器)	BFC 內部元素外邊距不與外部合併	`overflow: hidden` 可能剪裁陰絕對定位溢出內容；`flow-root` 純粹觸發 BFC 無副作用
父元素設定 `display: flex/grid`	`.parent { display: flex; }`	Flex/Grid 容器建立 BFC	改變內部佈局模式，需配合 `flex-direction: column` 保持垂直排列
子元素改用 Padding	`.child { padding-top: 20px; }` (移除 margin-top)	Padding 不參與外邊距合併	語意不同：Padding 是內部間距，背景色會延伸至 Padding 區
父元素加 `::before` 偽元素	`.parent::before { content: ""; display: table; }`	偽元素阻隔合併 (舊版 clearfix 技巧)	較繁瑣，不如 overflow 簡潔

最佳實踐建議

1. 現代專案：直接在父容器加 `display: flow-root;` (支援 Chrome 58+, Firefox 53+, Safari 11+, Edge 79+)。純粹、無副作用、語意清晰。
2. 需相容舊瀏覽器：用 `.parent { overflow: hidden; }`，注意檢查是否有 `position: absolute` 子元素被剪裁。
3. 佈局重構：外層改用 Flexbox (`.parent { display: flex; flex-direction: column; }`)，子元素用 `margin-top` 即正常工作，Flex 容器天然阻隔 margin collapsing。

結論

子元素 `margin-top` 導致父元素下移是 **CSS 標準行為 (Margin Collapsing)**，非 Bug。核心解法是**在父元素建立邊界 (Border/Padding) 或觸發 BFC (`overflow: hidden` / `display: flow-root` / `display: flex`)**。推薦使用 `display: flow-root` 或 Flexbox 佈局，一勞永逸。