CSS margin属性是用来设置元素外边距的，它可以影响元素与元素之间的距离，也可以影响元素与父元素或者文档边界的距离。在前端开发中，掌握margin属性的使用方法，可以让我们在布局设计方面更加灵活。
一、margin属性的基础用法
margin属性有4个值，分别表示上、右、下、左四个方向的外边距。比如设置一个元素的上边距为10px，右边距为20px，下边距为30px，左边距为40px。可以这样写：
selector {
margin: 10px 20px 30px 40px;
}
如果我们只想设置左右两个方向的外边距，可以这样写：
selector {
margin: 0 20px;
}
表示上下方向的外边距为0，左右方向的外边距为20px。如果我们只想设置一个方向的外边距，可以这样写：
selector {
margin-left: 20px;
}
此时该元素左边距为20px，其他方向的外边距为0。
二、margin属性与盒模型
在CSS中，每个元素都具有盒模型。盒模型由四个部分构成，分别是：内容区域、填充区域、边框区域、外边距区域。其中外边距区域影响着元素与其他元素之间的距离。举个例子，下面的代码中有两个div元素，它们之间的间距由margin属性控制：
<div class="first"></div>
<div class="second"></div>
.first {
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 20px;
}
.second {
width: 100px;
height: 100px;
background-color: blue;
}
上述代码中，first元素的下外边距为20px，我们看到first元素与second元素之间的距离正好是20px。同时，first元素的内容区域、填充区域、边框区域加起来的总宽度为100px，而整个first元素所占据的宽度包含了外边距区域，即宽度为140px。由此可见，margin属性影响着元素的总宽度和高度。
三、margin合并
如果一个元素的上外边距和下外边距相遇，它们会发生“margin合并”的现象。比如下面的代码中，由于两个元素的外边距相遇，它们之间的间距并不是40px，而是20px：
<div class="one"></div>
<div class="two"></div>
.one {
margin-bottom: 20px;
}
.two {
margin-top: 20px;
}
在CSS标准中，规定margin合并的情况有以下三种：
1、相邻兄弟元素间的margin合并
如果两个兄弟元素相遇，它们之间的间距等于它们之间的最大外边距值。
2、父元素与第一个子元素，或者最后一个子元素之间的margin合并
如果一个元素的上外边距和它的第一个子元素的上外边距相遇，或者一个元素的下外边距和它的最后一个子元素的下外边距相遇，它们会发生合并，合并后的外边距等于它们之间的最大外边距值。
3、空元素间的margin合并
一个不包含任何内容的空元素，它的上下外边距会发生合并，最终的外边距等于它们之间的最大值。
四、负margin
margin属性还可以取负值，常用于清除浮动和制作特殊效果。比如，我们可以使用负margin去除父元素高度坍塌问题：
<div class="parent">
<div class="child"></div>
<div class="clearfix"></div>
</div>
.parent {
overflow: hidden;
}
.child {
float: left;
width: 50%;
height: 200px;
margin-bottom: -1000px;
padding-bottom: 1000px;
}
上述代码通过给child元素设置负的外边距，同时给父元素设置溢出隐藏，来解决父元素高度坍塌的问题。
负margin还可以制作出很多特殊效果，比如实现两列布局的等高布局。我们可以通过设置相邻两个元素上下外边距相等来实现：
<div class="left"></div>
<div class="right"></div>
.left {
float: left;
width: 70%;
margin-right: -30%;
height: 200px;
background-color: red;
}
.right {
float: left;
width: 30%;
margin-left: -70%;
height: 300px;
background-color: blue;
}
上述代码中，设置了左边的元素宽度为70%，右边的元素宽度为30%，并分别设置相应的负margin值，实现了等高布局的效果。
五、总结
margin属性是CSS中最常用的属性之一，它不仅可以影响元素与元素之间的距离，也可以影响元素与文档边界的距离。在使用margin属性时，需要注意margin合并的情况，同时也可以运用负margin来解决一些特殊问题和制作特殊效果。
