在CSS的盒子模型中，每个元素都由内容区、内边距、边框和外边距四部分组成，其中外边距对应的属性就是margin。它负责控制当前元素与其他元素之间的距离，是页面布局中使用频率最高的属性之一。不过很多人在写样式时会有疑问：外边距的默认值到底是多少？为什么有的元素明明没设置margin，页面上却出现了空白？这篇文章就来系统地讲清楚margin属性的用法、默认值以及相关的常见问题。
一、margin属性的语法与默认值
margin属性的完整写法包含四个子属性，分别是margin-top（上外边距）、margin-right（右外边距）、margin-bottom（下外边距）和margin-left（左外边距）。这四个属性的默认值都是0，也就是说，如果你没有显式地为元素设置margin，浏览器会按照0来处理，元素与其周围元素之间不会因为margin产生额外空隙。
但这里有一个容易混淆的地方：默认值为0并不等于页面上看不到空白。浏览器为了排版美观，会为某些标签预设一份默认样式表，也就是我们常说的user agent stylesheet。例如<h1>到<h6>标题标签、<p>段落标签，在浏览器默认样式表中都被赋予了margin值。比如在Chrome浏览器中，<p>标签的默认margin大约是16px上下，<h1>的默认margin甚至达到21px左右。这些值是浏览器样式表覆盖后的结果，而不是margin属性本身的默认值。
/* margin四个方向的完整写法 */
div {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
}除了具体的长度值，margin还支持auto和百分比。auto常用于块级元素的水平居中，而百分比是相对于父元素的宽度计算的，注意即便是margin-top和margin-bottom，百分比参照的也是父元素的宽度而非高度，这一点在垂直布局中尤其需要注意。
二、margin简写形式与取值规则
实际开发中，我们更多使用margin的简写形式。根据提供的值个数不同，简写的含义也不一样，具体规则如下：一个值表示四个方向相同；两个值分别表示上下和左右；三个值依次表示上、左右、下；四个值按上、右、下、左的顺时针顺序分配。很多布局bug正是因为记错了四个值的顺序而产生的，顺时针口诀是记忆的好帮手。
/* 一个值：四个方向都是10px */
.box1 { margin: 10px; }
/* 两个值：上下10px，左右20px */
.box2 { margin: 10px 20px; }
/* 三个值：上10px，左右20px，下30px */
.box3 { margin: 10px 20px 30px; }
/* 四个值：上10px，右20px，下30px，左40px（顺时针） */
.box4 { margin: 10px 20px 30px 40px; }需要特别提醒的是，margin的取值可以是负数。负margin会让元素向对应方向移动，甚至与相邻元素产生重叠效果，这在双飞翼布局、等高布局等经典布局方案中非常实用。例如给元素设置margin-left: -50px，元素会向左移动50px，可能覆盖到左侧元素的区域。负margin虽然强大，但使用不当会造成元素重叠错乱，建议在明确理解盒子模型的前提下谨慎使用。
三、块级元素与行内元素的margin表现差异
margin在不同类型元素上的表现差别很大。块级元素（display为block）的四个方向margin都会正常生效，可以随意通过margin控制其与周围元素的距离。而行内元素（display为inline）只支持水平方向的margin，也就是margin-left和margin-right有效，垂直方向的margin-top和margin-bottom不会产生任何视觉效果。
<style>
span {
margin-top: 50px; /* 对行内元素无效 */
margin-left: 50px; /* 有效，会产生水平间距 */
}
</style>
<span>我是行内元素</span>这也解释了一个常见疑问：为什么给<span>或者<a>标签设置margin-top没有反应。解决办法有两个，一是将元素改为行内块级display: inline-block，二是直接改为display: block或display: flex。另外，对于替换型元素如<img>、<input>，虽然是行内显示，但垂直margin同样是生效的，因为它们有内在的宽高尺寸，这一点与普通行内元素不同。
四、margin塌陷问题及解决方案
margin塌陷（也叫外边距合并）是垂直方向margin最著名的坑。当两个相邻的块级元素上下排列时，上面元素的margin-bottom和下面元素的margin-top不会相加，而是取两者中的较大值作为实际间距。例如第一个元素设置了margin-bottom: 30px，第二个元素设置了margin-top: 20px，最终两者之间的距离是30px而不是50px。
<style>
.a { margin-bottom: 30px; }
.b { margin-top: 20px; }
/* 两个div之间的实际距离是30px，而不是50px */
</style>
<div class="a">第一个盒子</div>
<div class="b">第二个盒子</div>塌陷还发生在父子元素之间：如果父元素没有设置border、padding或者触发BFC，子元素的margin-top会穿透父元素，表现为父元素整体下移，子元素与父元素之间的间距却没有变化。解决margin塌陷的常用手段是创建BFC（块级格式化上下文），比如给父元素设置overflow: hidden、display: flow-root，或者添加border和padding。也可以统一约定只用一个方向的margin，比如团队规范中规定只使用margin-top，从写法上规避塌陷问题。
总结一下：margin属性的默认值是0，浏览器中看到的标签自带间距来自浏览器默认样式表；简写形式按顺时针方向分配值；行内元素的垂直margin无效；垂直方向的相邻margin会产生塌陷。掌握这些细节后，在遇到布局间距异常时就能快速定位问题根源，写出更加健壮的CSS代码。