12. 外边距margin

什么是外边距

外边距是边框外部的透明区域，用来控制元素与元素之间的距离。

.box {
  margin: 20px;
}

这个盒子四周会留出 20px 的空白，其他元素会被推开。

单独设置四边

和 padding 一样，margin 也可以单独控制每条边：

属性	作用
margin-top	上外边距
margin-right	右外边距
margin-bottom	下外边距
margin-left	左外边距

.box {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 15px;
  margin-left: 20px;
}

简写属性 margin

margin 简写属性的规则和 padding 完全一样：

/* 一个值：四边相同 */
margin: 20px;

/* 两个值：上下 / 左右 */
margin: 10px 20px;

/* 三个值：上 / 左右 / 下 */
margin: 10px 20px 15px;

/* 四个值：上 / 右 / 下 / 左 */
margin: 10px 20px 15px 25px;

使用 auto 居中

margin: auto 是一个常用技巧，可以让块级元素水平居中：

.container {
  width: 800px;
  margin: auto;  /* 左右自动平分剩余空间 */
}

原理是：auto 会让浏览器自动计算左右外边距，把剩余空间平均分配。

也可以只设置一边：

.container {
  width: 800px;
  margin-left: auto;   /* 靠右 */
  margin-right: auto;  /* 靠左 */
  /* 两者都写就居中了 */
}

margin 可以为负

和 padding 不同，margin 可以写负值。负 margin 会让元素向相反方向移动：

.box {
  margin-top: -10px;   /* 向上移动 */
  margin-left: -20px;  /* 向左移动 */
}

负 margin 在布局中偶尔会用到，比如让两个元素重叠。

margin 合并现象

这是一个容易踩坑的点。当两个垂直外边距相遇时，它们会合并成一个。

.box1 { margin-bottom: 30px; }
.box2 { margin-top: 20px; }

你可能会以为两个盒子间距是 30 + 20 = 50px。实际上只有 30px，取两者中的较大值。

什么时候会合并

1. 相邻元素：上一个元素的下 margin 和下一个元素的上 margin
2. 父子元素：父元素和子元素的上下 margin 可能合并
3. 空元素：一个空元素的上下 margin 会合并

什么时候不会合并

• 水平方向的 margin 不会合并
• 浮动元素的 margin 不会合并
• 绝对定位元素的 margin 不会合并
• 设置了 display: flex 或 grid 的容器内不会合并

inherit 值

margin 支持 inherit，从父元素继承外边距值：

.parent {
  margin-left: 50px;
}

.child {
  margin-left: inherit;  /* 继承父元素的 50px */
}

实际开发中用得不多，了解即可。