在网页设计中，外边距（margin）是CSS中用来控制元素与其他元素之间的空白区域的属性。外边距可以为元素提供空间，从而改变元素在页面中的布局。在本文中，我们将深入研究CSS外边距的用法和特性。
1. 外边距的基本语法
使用外边距属性时，可以使用以下简写语法或单独定义上下左右四个方向的外边距：
margin: 上 右 下 左;
例如：
margin: 10px 15px 20px 25px;
上述代码表示上边距为10像素，右边距为15像素，下边距为20像素，左边距为25像素。
另外，也可以使用简写形式，仅定义水平和垂直方向的外边距：
margin: 垂直方向外边距 水平方向外边距;
例如：
margin: 10px auto;
上述代码表示垂直方向上边距和下边距为10像素，水平方向左右边距自动调整。
2. 外边距的属性值
外边距的属性值可以使用像素（px）、百分比（%）、em、rem等单位进行设置。
2.1. 像素单位
例如：
margin: 10px;
上述代码表示所有方向的外边距均为10像素。
2.2. 百分比单位
百分比单位是相对于包含元素的宽度进行计算的。例如：
margin: 5%;
上述代码表示所有方向的外边距为包含元素宽度的5%。
2.3. em和rem单位
margin: 2em;
上述代码表示所有方向的外边距为字体尺寸的2倍。
2.4. 负值外边距
外边距也可以使用负值，用来调整元素与其他元素之间的距离。例如：
margin: -10px;
上述代码表示所有方向的外边距为负10像素。
3. 外边距的特性
3.1. 合并外边距
外边距会在某些情况下发生合并。当两个相邻元素（没有任何内容、填充或边框分隔）具有相同的垂直外边距时，它们的外边距会合并为一个外边距。合并后的外边距大小为两个外边距中的较大值。
3.2. 堆叠顺序
当多个元素堆叠在一起时，外边距也会发挥作用。元素的外边距被叠加在一起，而不是重叠。堆叠顺序为从上往下，后面的元素的外边距将与前面元素的外边距叠加在一起。
4. 总结
对于网页设计师来说，正确使用外边距是控制页面布局的关键之一。本文介绍了CSS外边距的基本语法和常用属性值，并讨论了外边距的一些特性。希望通过本文的介绍，能让读者对CSS外边距有更深入的了解，从而更好地应用于自己的网页设计中。
本文来自极简博客，作者：深海探险家，转载请注明原文链接：CSS Margin（外边距）
