margin 是 CSS 最常用、最基礎、也最容易踩坑的屬性。你真的掌握它的所有特性嗎？垂直外邊距合併、BFC 隔離、負 margin 拉版、inline 元素的特殊行為……本文從規範到實戰，一次講透。

📐 Margin 基礎語法與速記法

• 四向獨立：margin-top/right/bottom/left
• 縮寫順序：上 → 右 → 下 → 左（順時針）
• 值類型：length | percentage | auto
• 省略規則：
  • 1 值：四向同值
  • 2 值：上下 | 左右
  • 3 值：上 | 左右 | 下
  • 4 值：上右下左

最佳實踐：避免使用 3 值寫法（margin: 10px 20px 30px），易讀性差且維護時極易出錯。寧可多打幾個字，也要寫完整 4 值。

🌀 垂直外邊距合併：規範、現象、破解

現象

相鄰塊級元素的上下 margin 合併為較大者；父子元素首尾 margin 穿透父容器（無 padding/border/block formatting context 時）。

經典坑：子元素 margin-top 撐開父元素

<div class="parent">
  <div class="child" style="margin-top: 20px">內容</div>
</div>

現象：.parent 上方出現 20px 空白，而非子元素內部凹陷。

破解方案（任一啟用 BFC）

• 父元素 overflow: hidden/auto
• 父元素 display: flow-root（現代首選）
• 父元素 float: left / position: absolute / display: flex/grid
• 父元素加 padding-top: 1px 或 border-top: 1px solid transparent

推薦 display: flow-root：語義清晰、無副作用、不觸發舊版 IE hasLayout Bug。

🆚 Margin vs Padding：何時用哪個？

場景	選 Margin	選 Padding
元素間距	✅ 隔離模組，可合併	❌
內容與邊框間距	❌	✅ 保留背景色/圖
需要背景延伸至邊框	❌	✅
負值拉版/重疊	✅ 負 margin 神技	❌ Padding 不接受負值
inline 元素	僅水平方向生效	四向生效但不影響行高

核心心法：Margin 隔離模組，Padding 呼吸內容。

🧱 塊級 vs 內聯元素的 Margin 行為差異

• Block：四向皆生效，垂直合併，佔滿一行。
• Inline：僅水平 margin 生效（left/right），垂直 margin 被忽略（不佔空間、不合併）。
• Replaced Inline (img, input, textarea…)：擁有內在尺寸，四向 margin 皆生效，表現同 inline-block。

⚡ 負 Margin 實戰神技

1. 等高欄佈局（Holy Grail）

.col { padding-bottom: 9999px; margin-bottom: -9999px; }
.container { overflow: hidden; }

2. 負 margin 吸附定位

.modal { margin-top: -150px; /* 自身高度一半 */ margin-left: -200px; /* 寬度一半 */ }

3. 多行文字垂直置中（配合 line-height）

.wrapper { line-height: 200px; }
.text { display: inline-block; vertical-align: middle; line-height: 1.5; }

🐛 經典瀏覽器 Bug 與修復

• IE6 雙倍浮動 margin：浮動方向同側 margin 加倍 → display: inline 修復。
• IE6/7 百分比 margin 計算錯誤：容器寬度極小時誤差大 → 改用像素或 flex。
• Chrome/Safari 自動填充 margin：margin: auto 在 flex/grid 容器中表現不同 → 明確指定對齊屬性。

🧠 總結：Margin 思維模型

1. 預設流佈局中，margin 是「模組間的氣墊」。
2. BFC 是「氣墊隔離艙」，內外氣墊不傳導。
3. 負 margin 是「負壓氣墊」，能將模組拉近、重疊、甚至反向佈局。
4. Inline 元素垂直無氣墊，Replaced 元素例外。
5. 百分比 margin 參考「包含塊寬度」（即使垂直方向）。

下次寫 margin 時，腦海裡浮現「氣墊、隔離艙、負壓」，你就真正懂了。