---
tags: CSS, 六角筆記王
title: CSS - 邊距重疊
---

# 為什麼元素無法往下推? 原來中了邊距重疊
在 [box-model](/euc00OdtRG6AuU6LHcfMNA) 提到 border 與 padding 會影響元素寬高，改為 `box-sizing: border-box`，就可以避免這個情況，於是內距搞定了，那外距呢? 是不是如我們想像中，推擠多少就是多少?

## 邊距重疊 ( Collapsing margins )
情況是這樣的，某次切版時，想將區塊與區塊分開，於是寫了這段 :

<section class="my-3">
  <h2>1</h2>
</section>
<section class="my-3">
  <h2>4</h2>
</section>

.mb-3 {
  margin-bottom: 1.5rem;
}

神奇的事發生了，中間的推擠距離重疊了! 為什麼它們會重疊?
<iframe height="300" style="width: 100%;" scrolling="no" title="" src="https://codepen.io/hsuan333/embed/abwJzRr?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/hsuan333/pen/abwJzRr">
</a> by Vic (<a href="https://codepen.io/hsuan333">@hsuan333</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 尋找初始設定
通常我們會習慣用 Normalize、Reset 或是 Neither 去將標籤的預設值給初始化，卻忽略了標籤在未被重新初始化時，它就有原本的預設值，像是 [p 標籤](https://www.w3schools.com/TAgs/tag_p.asp)，原本的設定長這樣 :

// Default CSS Settings
p {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}

若將 p 標籤排列在一起，按照原本的預設值就會產生間距不一的問題，第一個與第二個間距以及最後一個與倒數第二個間距為 1em，其他均為 2em，為了解決這個問題，CSS 就設定了在非 Block formatting context 與其他的條件下，`margin-top` 會自動合併。
> 1. 內外層均為 "區塊" 元素
> 2. 外層區塊元素沒有 `border`、`padding`、`overflow`
> 3. 內層第一個區塊元素(空元素不算)，不包含 `float、absolute`

若為父子元素，且兩個區塊沒有 `padding`、`border` 、`line box`、`clearance` 隔開時，也會產生合併。

## 解決方式

簡易的解決方式 :
1. 只由上往下推
2. 使用 `padding`
3. 改變屬性 `d-inline-block`
4. 加入 `border`
5. 加入 `float` 或是 `absolute`
<iframe height="300" style="width: 100%;" scrolling="no" title="邊距重疊解決方式" src="https://codepen.io/hsuan333/embed/yLXMejj?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/hsuan333/pen/yLXMejj">
邊距重疊解決方式</a> by Vic (<a href="https://codepen.io/hsuan333">@hsuan333</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 參考來源
> 1. [Jackie Yin - 深度剖析 Margin 塌陷，BFC，Containing Block之间的关系](https://zhuanlan.zhihu.com/p/30168984)
> 2. [RURU Tseng - 話說 Margin-collapse 是什麼呢？](https://ithelp.ithome.com.tw/articles/10226790)
> 3. [JinWen - Day25 CSS：BFC（Block formatting context）](https://ithelp.ithome.com.tw/articles/10226790)