在 CSS 中，外边距（margin）指的是边框到 “父元素” 或 “兄弟元素” 之间的那一部分。外边距是在元素边框的外部的。
CSS 外边距的局部样式
从 CSS 盒子模型可以看出，外边距分为 4 个方向：margin-top、margin-right、margin-bottom、margin-left。每个方向可以单独设置，控制元素与周围元素或父元素的距离。
语法：
margin-top: 数值;
margin-right: 数值;
margin-bottom: 数值;
margin-left: 数值;说明：
外边距的取值是一个数值，该数值可以是以下几种情况。
- 固定单位，如 10px、2rem。
- 百分比，如 10%（相对于父元素的宽度）。
- 关键字，如 auto（常用于水平居中）。
- 负值，如 -50px（使元素向反方向移动）。
示例 1：CSS 定义外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
/* 将块元素转换为 inline-block 元素，使元素水平排列 */
display: inline-block;
padding: 50px;
margin-top: 50px;
margin-right: 100px;
margin-bottom: 150px;
margin-left: 200px;
border: 1px solid red;
background-color: lightskyblue;
}
</style>
</head>
<body>
<div>绿叶网</div>
</body>
</html>页面效果如下图所示。
分析：
小伙伴们可能会感到困惑：“为什么加上 margin 跟没加一样呢？看不出有什么区别啊。”
实际上，外边距指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。上面我们没有加入其他元素当参考对象，肯定看不出来啊。我们再来看一个例子。
示例 2： “只有父元素没有兄弟元素时” 的外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#father {
display: inline-block; /* 将块元素转换为 inline-block 元素，使父元素宽度自适应内容 */
border: 1px solid red;
}
#son {
display: inline-block; /* 将块元素转换为 inline-block 元素，使子元素水平排列 */
padding: 50px;
margin-top: 50px;
margin-right: 100px;
margin-bottom: 150px;
margin-left: 200px;
border: 1px solid blue;
background-color: lightskyblue;
}
</style>
</head>
<body>
<div id="father">
<div id="son">绿叶网</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
当只有父元素时，该元素设置的 margin 就是相对于父元素之间的距离。
示例 3： “有兄弟元素时” 的外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#father {
display: inline-block; /* 将块元素转换为 inline-block 元素，使父元素宽度自适应内容 */
border: 1px solid red;
}
#son {
display: inline-block; /* 将块元素转换为 inline-block 元素，使子元素水平排列 */
padding: 50px;
margin-top: 50px;
margin-right: 100px;
margin-bottom: 150px;
margin-left: 200px;
border: 1px solid blue;
background-color: lightskyblue;
}
.brother {
height: 50px;
background-color: lightskyblue;
}
</style>
</head>
<body>
<div id="father">
<div class="brother"></div>
<div id="son">绿叶网</div>
<div class="brother"></div>
</div>
</body>
</html>页面效果如下图所示。
分析：
当既有父元素，也有兄弟元素时，该元素会先看看四个方向有没有兄弟元素存在。如果该方向有兄弟元素，则这个方向的 margin 就是相对于兄弟元素而言。如果该方向没有兄弟元素，则这个方向的 margin 就是相对于父元素而言。
padding 和 margin 的区别在于：padding 体现的是元素的内部结构，而 margin 体现的是元素之间的相互关系。
CSS 外边距的简写形式
跟外边距 padding 一样，外边距 margin 也有简写形式。在实际开发中，我们往往使用简写形式，因为这样开发效率更高。其中 margin 写法也有 4 种，如下所示。
语法：
margin: 数值;
margin: 数值1 数值2;
margin: 数值1 数值2 数值3;
margin: 数值1 数值2 数值3 数值4;说明：
margin: 50px;上面代码表示，4 个方向的外边距都是 50px。
margin: 50px 100px;上面代码表示，margin-top 和 margin-bottom 为 50px，margin-right 和 margin-left 为 100px。
margin: 50px 100px 150px;上面代码表示，margin-top 为 50px，margin-right 和 margin-left 为 100px，margin-bottom 为 150px。
margin: 50px 100px 150px 200px;上面代码表示，margin-top 为 50px，margin-right 为 100px，margin-bottom 为 150px，margin-left 为 200px。
对于 margin 取值的顺序，小伙伴们按顺时针记忆就可以了，如下图所示。
注意:
- 对 inline 元素（如 span、strong 等）设置 width 和 height 是无效的，但对它们设置 padding 和 margin 是有效的。
- 当两个或多个元素的垂直外边距（margin-top 和 margin-bottom）相遇时，它们会合并成一个外边距，这个外边距的高度等于相邻外边距中较大的一个。 外边距合并只发生在垂直方向，水平方向上不会发生外边距合并。
示例 4：CSS 外边距的简写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#father {
display: inline-block; /* 将块元素转换为 inline-block 元素，使父元素宽度自适应内容 */
border: 1px solid red;
}
#son {
display: inline-block; /* 将块元素转换为 inline-block 元素，使子元素水平排列 */
padding: 50px;
margin: 50px 100px;
border: 1px solid blue;
background-color: lightskyblue;
}
</style>
</head>
<body>
<div id="father">
<div id="son">绿叶网</div>
</div>
</body>
</html>页面效果如下图所示。
