在CSS入门学习过程中，margin属性是盒模型里非常重要的组成部分，它用来设置元素边框外部的空白区域，也就是外边距，能够控制元素和其他元素之间的间距。合理运用margin属性可以调整页面布局的疏密程度，让页面展示效果更符合设计需求。
margin属性的基础语法
margin属性可以接受1到4个值，不同数量的取值对应不同的外边距设置规则，具体规则如下：
- 单值：四个方向的外边距都设置为同一个值
- 双值：第一个值设置上下外边距，第二个值设置左右外边距
- 三值：第一个值设置上外边距，第二个值设置左右外边距，第三个值设置下外边距
- 四值：按照上、右、下、左的顺序依次设置四个方向的外边距，也就是顺时针方向
margin的取值可以是长度单位（比如px、em、rem），也可以是百分比，还可以是auto关键字，不同取值有不同的作用。
margin属性的代码示例
下面通过具体的代码来演示不同取值的margin效果：
/* 单值设置：四个方向外边距都是20px */
.box1 {
width: 100px;
height: 100px;
background-color: #f0f0f0;
margin: 20px;
}
/* 双值设置：上下外边距10px，左右外边距30px */
.box2 {
width: 100px;
height: 100px;
background-color: #e0e0e0;
margin: 10px 30px;
}
/* 三值设置：上外边距5px，左右外边距15px，下外边距25px */
.box3 {
width: 100px;
height: 100px;
background-color: #d0d0d0;
margin: 5px 15px 25px;
}
/* 四值设置：上5px，右10px，下15px，左20px */
.box4 {
width: 100px;
height: 100px;
background-color: #c0c0c0;
margin: 5px 10px 15px 20px;
}
/* 使用auto实现块级元素水平居中 */
.center-box {
width: 200px;
height: 100px;
background-color: #b0b0b0;
margin: 0 auto;
}margin合并现象
在垂直方向上，两个相邻元素的外边距会发生合并，也就是最终的外边距会取两个元素外边距中较大的那个值，而不是两个值相加。比如上面的元素设置margin-bottom为20px，下面的元素设置margin-top为30px，那么两个元素之间的实际间距是30px，而不是50px。
这种合并现象只发生在垂直方向的相邻块级元素之间，水平方向不会出现，浮动元素和绝对定位元素的外边距也不会发生合并。
常见使用场景
margin属性最常见的使用场景就是调整元素之间的间距，比如列表项之间的间距、卡片组件之间的间距等。另外利用margin: 0 auto可以实现固定宽度的块级元素水平居中，这是很多布局中会用到的小技巧。
需要注意的是，给行内元素设置上下margin是无效的，只有左右margin会生效，如果需要调整行内元素的上下间距，可以使用padding属性或者把元素设置为行内块元素。