塊級元素的外邊距塌陷（Margin Collapse）

Margin 塌陷的原因

當父元素內的第一個子元素有 margin-top，而父元素本身沒有 padding 或 border，該 margin-top 會與父元素的 margin-top 合併，導致父元素整體下移。

解決 Margin 塌陷的方法

📌 方法 1：加 padding-top 或 border-top

.outer {
    padding-top: 1px; /* 或 border-top: 1px solid transparent; */
}

✅ 優點： 符合標準行為，清楚直覺，不影響其他 CSS 行為。

❌ 缺點： 會佔用內部空間（但 1px 幾乎無感）。

📌 方法 2：使用 overflow: hidden;

.outer {
    overflow: hidden;
}

✅ 優點： 可同時解決浮動元素高度塌陷，適用於清除浮動。

❌ 缺點： 可能會隱藏超出內容，影響滾動行為。

📌 方法 3：使用 display: flex; 或 display: grid;

.outer {
    display: flex;
    flex-direction: column;
}

✅ 優點： 適合現代 CSS 佈局，自動避免塌陷。

❌ 缺點： 會改變內部元素的行為，需額外調整。

方法比較表

方法 ✅優點 ❌缺點 適用情境
padding-top / border-top 符合標準行為，清楚直覺 可能影響內部佈局 一般情況，最推薦
overflow: hidden; 適用於清除浮動，完全避免塌陷 可能影響滾動和隱藏內容 當 .outer 內有浮動元素時
display: flex; / grid; 適用於現代 CSS 佈局 改變內部元素行為 當 .outer 已經在用 flexbox / grid