CSS margin（外边距）

margin（外边距） 是盒子最外层的空白区域，用来控制元素与其它元素或容器边缘之间的距离。它不包含在元素的「背景和边框」之内，在盒模型里位于 border 之外。

基本用法

.box {
  margin: 20px;              /* 四边都是 20px */
  margin: 10px 20px;         /* 上下 10px，左右 20px */
  margin: 10px 20px 30px;    /* 上 左右 下 */
  margin: 10px 20px 30px 40px;  /* 上 右 下 左（顺时针） */
}

单边：margin-top、margin-right、margin-bottom、margin-left。

---

常用值

• 长度：10px、1em、1rem
• 百分比：相对于父元素的宽度计算（上下左右都是），不是高度
• auto：用于水平方向时，可实现水平居中或左右分配剩余空间（见下）
• 0：无外边距

---

水平居中（块级元素）

给块级元素设固定宽度后，左右 margin 设为 auto，即可在容器内水平居中：

.container {
  width: 600px;
  margin-left: auto;
  margin-right: auto;
  /* 或简写 */
  margin: 0 auto;
}

---

负 margin

margin 可以为负值，元素会向对应方向「拉过去」，可能与相邻元素重叠。常用于微调布局或某些经典布局技巧，使用时要留意重叠和遮挡。

.pull-up {
  margin-top: -10px;
}

---

外边距合并（Collapsing Margins）

在块级排版中，垂直方向上相邻的两个 margin 会「合并」成一个：取两者中的较大值（若一正一负则相加）。只有上下方向会合并，左右不会。

示例：

<div class="a">A</div>
<div class="b">B</div>

.a { margin-bottom: 20px; }
.b { margin-top: 30px; }

A 和 B 之间的空隙不是 50px，而是 30px（取大）。

注意：

• 父子之间也会合并：子元素的 margin-top 可能和父元素的 margin-top 合并。
• 若父元素有 padding、border 或 overflow 非 visible，或形成 BFC，则不会与子 margin 合并。
• 浮动、flex、grid 等布局下，margin 不合并。

---

小结

• margin 控制元素外侧空白；简写顺序：上 右 下 左。
• 水平居中：margin: 0 auto（需有宽度）；可为负值。
• 垂直方向相邻 margin 会合并，取大值（或相加若一正一负）。

下一节学习 CSS padding（填充）。