CSS Margin Collapse 邊界重疊

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

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

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

重疊情況

相鄰同層元素

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

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

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

小提醒

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

父子元素

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

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

.parent {
  margin-top: 20px;
}

.child {
  margin-top: 30px;
}

小提醒

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

如何防止 Margin Collapse

使用 padding

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

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

使用 overflow

.parent {
  overflow: hidden;
}

添加 border

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

使用 flexbox

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

.item {
  margin: 20px 0;
}