CSS margin(外边距)

外边距 margin 定义盒子与周围元素之间的空白，用来"拉开距离"、制造页面留白，也是块级元素水平居中的关键手段。它位于边框的最外侧，是透明区域，不会显示背景颜色。

外边距的四个方向

margin 可以分别控制四个方向：margin-top（上）、margin-right（右）、margin-bottom（下）、margin-left（左）：

p {
  margin-top: 10px;     /* 上方留 10px */
  margin-right: 20px;   /* 右侧留 20px */
  margin-bottom: 10px;  /* 下方留 10px */
  margin-left: 0;       /* 左侧不留 */
}

简写规则：1~4 个值

margin 简写按"上、右、下、左"顺时针排列，给出的值越少，规则越有规律：

.box { margin: 10px; }            /* 四个方向都是 10px */
.box { margin: 10px 20px; }       /* 上下 10px，左右 20px */
.box { margin: 10px 20px 5px; }   /* 上 10px，左右 20px，下 5px */
.box { margin: 10px 20px 5px 0; } /* 上右下左 依次指定 */
/* 说明：同一元素多条规则只有最后一条生效，这里仅演示写法 */

用 auto 实现水平居中

块级元素给定宽度后，把左右外边距设为 auto，浏览器会自动平分剩余空间，元素就水平居中了，这是最常见的居中写法：

.container {
  width: 600px;      /* 必须给定宽度 */
  margin: 0 auto;    /* 左右 auto：自动分配两侧空白 */
}
/* 效果：宽 600px 的容器在页面中水平居中 */

外边距合并（塌陷）

垂直方向上，相邻两个盒子的上下 margin 不会相加，而是取较大的那个，这称为外边距合并；父子元素之间也可能发生同样现象：

/* 上方元素 margin-bottom:30px，下方元素 margin-top:20px */
/* 两者实际间距 = 30px（取大者），而不是 50px */

负外边距

margin 支持负值，能让元素反向移动或与相邻元素重叠，常用于修正间距、实现"压版"效果：

.banner { margin-top: -30px; }   /* 元素向上移动 30px，与上方内容重叠 */

小结

margin 负责盒子外侧的透明间距，支持四边拆分与 1~4 值简写；margin:auto 居中、负值重叠与垂直方向的外边距塌陷是三个必须牢记的进阶知识点。