CSS 邊界重疊：相鄰外距為什麼會合併

CSS 邊界重疊（Margin Collapse）是一個重要但常被誤解的概念。當兩個或多個相鄰的 垂直邊界 相遇時，它們會合併成一個邊界或等於較大元素的邊界，這個現象就稱為邊界重疊。

邊界重疊只會在以下情況下發生：

垂直方向：只有垂直邊界會重疊，水平邊界不會。
相鄰元素：元素必須在正常文檔流中相鄰。
塊級元素：只有塊級元素會發生邊界重疊。
沒有間隔：元素之間沒有 padding、border 或其他內容分隔。

重疊情況

相鄰同層元素

兩個相鄰的同層元素之間會發生邊界重疊。

html

<div class="box1">box1</div>
<div class="box2">box2</div>

css

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

小提醒

兩個元素之間的間距是 30px（較大值），而不是 50px。

父子元素

父元素和子層第一個/子層最後一個元素之間也會發生邊界重疊。

html

<div class="parent">
  <div class="child">子元素</div>
</div>

css

.parent {
  margin-top: 20px;
}

.child {
  margin-top: 30px;
}

小提醒

父元素的實際上邊界是 30px，而不是 50px。

如何防止 Margin Collapse

使用 padding

css

/* ❌ 會重疊 */
.box {
  margin-top: 20px;
}

/* ✅ 不會重疊 */
.box {
  padding-top: 20px;
}

使用 overflow

css

.parent {
  overflow: hidden;
}

添加 border

css

.parent {
  border-top: 1px solid transparent;
}

使用 flexbox

css

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

.item {
  margin: 20px 0;
}

怎麼避開

css

/* 方法一：父層加一點內距或框線隔開 */
.parent { padding-top: 1px; }

/* 方法二：改用彈性盒子或格線，子元素不會發生邊界重疊 */
.parent { display: flex; flex-direction: column; gap: 24px; }

實務上最常見的做法是 改用彈性盒子或格線搭配 gap，間距一次算清楚，也不必再處理重疊。

小提醒

邊界重疊只發生在 垂直方向，左右外距一律相加。

常見問題

哪些情況會發生邊界重疊？

三種：相鄰兄弟元素之間、父元素與第一個或最後一個子元素之間、以及空元素自身的上下外距。都只發生在垂直方向。

為什麼子元素的外距跑到父層外面？

那就是父子之間的邊界重疊。父層若沒有內距、框線或其他隔開的因素，子元素的上外距會穿透出去變成父層的外距。

要怎麼避免？

給父層一點內距或框線就能隔開；也可以把父層改成彈性盒子或格線容器，這兩種排版方式的子元素不會發生邊界重疊。

水平方向也會嗎？

不會。邊界重疊只發生在垂直方向，左右外距一律相加。

延伸閱讀

CSS 邊界重疊：相鄰外距為什麼會合併 ​

重疊情況 ​

相鄰同層元素 ​

父子元素 ​

如何防止 Margin Collapse ​

使用 padding ​

使用 overflow ​

添加 border ​

使用 flexbox ​

怎麼避開 ​

常見問題 ​

延伸閱讀 ​