CSS外边距是用来设置元素周围空白区域的属性，这部分空白区域位于元素边框之外，主要作用是控制当前元素与其他相邻元素之间的距离，是CSS盒模型中非常重要的组成部分，掌握外边距的定义和使用能有效提升页面布局的合理性。
外边距的基础定义方式
CSS中外边距通过margin属性来定义，该属性可以接受1到4个值，不同数量的值对应不同的边距设置规则，具体规则如下：
- 如果只设置1个值，会同时作用于上、右、下、左四个方向的外边距
- 如果设置2个值，第一个值作用于上下方向，第二个值作用于左右方向
- 如果设置3个值，第一个值作用于上方向，第二个值作用于左右方向，第三个值作用于下方向
- 如果设置4个值，按照上、右、下、左的顺序分别设置四个方向的外边距
除了使用复合属性margin，还可以单独设置某一个方向的外边距，对应的属性分别是margin-top（上外边距）、margin-right（右外边距）、margin-bottom（下外边距）、margin-left（左外边距）。
外边距的常用取值
外边距的取值类型主要有以下几种：
| 取值类型 | 说明 | 示例 |
|---|---|---|
| 长度值 | 使用px、em、rem等单位定义具体的外边距大小 | margin: 10px; |
| 百分比 | 相对于包含块的宽度计算外边距大小，上下外边距也参考宽度计算 | margin: 5%; |
| auto | 浏览器自动计算外边距，常用于块级元素水平居中 | margin: 0 auto; |
| inherit | 从父元素继承外边距属性 | margin: inherit; |
外边距的使用示例
下面是一个简单的外边距使用示例，我们创建两个div元素，给第一个div设置外边距，观察两个元素的间距变化：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>外边距示例</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #f0f0f0;
/* 设置上下外边距10px，左右外边距20px */
margin: 10px 20px;
}
.box2 {
width: 200px;
height: 200px;
background-color: #e0e0e0;
/* 单独设置上外边距15px */
margin-top: 15px;
}
</style>
</head>
<body>
<div class="box1">第一个盒子</div>
<div class="box2">第二个盒子</div>
</body>
</html>
外边距合并问题
外边距合并是指当两个垂直方向相邻的块级元素相遇时，它们的上下外边距会发生合并，合并后的外边距大小等于两个外边距中较大的那个值，这个问题在布局中经常会出现，需要注意。
比如下面两个元素，第一个元素的下外边距是20px，第二个元素的上外边距是15px，最终两个元素之间的间距会是20px，而不是35px：
.element1 {
margin-bottom: 20px;
}
.element2 {
margin-top: 15px;
}
如果要避免外边距合并，可以给其中一个元素添加内边距或者边框，或者让元素触发BFC（块级格式化上下文），这样就能让两个元素的外边距独立计算。
注意事项
在使用外边距时需要注意几个点，首先是行内元素只有左右外边距生效，上下外边距不会生效，如果需要设置行内元素的上下间距，可以使用内边距或者把元素设置为块级元素、行内块元素。其次是外边距可以使用负值，负值会让元素向相反方向移动，比如margin-left: -10px会让元素向左移动10px。最后是在实际布局中，合理搭配外边距和内边距使用，能让页面布局更加灵活美观。