外边距

外边距（Margin）是CSS盒模型中边框与其他元素之间的空间。它用于控制元素与元素之间的距离，创建页面布局的留白和层次感。

margin属性

margin属性用于设置元素的外边距，可以同时设置上下左右四个方向的外边距。

语法

css 
/* 简写形式 */
margin: <length> | <percentage> | auto;

/* 分别设置四个方向 */
margin-top: <length> | <percentage> | auto;
margin-right: <length> | <percentage> | auto;
margin-bottom: <length> | <percentage> | auto;
margin-left: <length> | <percentage> | auto;

值

  • <length>：使用长度值指定外边距，如px、em、rem、cm等。
  • <percentage>：相对于父元素内容区域宽度的百分比。
  • auto：自动计算外边距，常用于水平居中元素。

简写方式

margin属性支持多种简写方式，与padding类似：

  1. 单一值：margin: 10px; - 上下左右外边距均为10px
  2. 两个值：margin: 10px 20px; - 上下外边距10px，左右外边距20px
  3. 三个值：margin: 10px 20px 30px; - 上外边距10px，左右外边距20px，下外边距30px
  4. 四个值：margin: 10px 20px 30px 40px; - 上10px，右20px，下30px，左40px（顺时针方向）

示例

css 
/* 单一值 */
.box1 { margin: 10px; }

/* 两个值 */
.box2 { margin: 10px 20px; }

/* 三个值 */
.box3 { margin: 10px 20px 30px; }

/* 四个值 */
.box4 { margin: 10px 20px 30px 40px; }

/* 单个方向 */
.box5 { margin-top: 10px; }
.box6 { margin-right: 20px; }
.box7 { margin-bottom: 30px; }
.box8 { margin-left: 40px; }

/* 水平居中 */
.centered { width: 50%; margin: 0 auto; }

百分比值的计算

与内边距类似，当外边距使用百分比值时，无论上下左右，都相对于父元素的宽度进行计算：

css 
.parent {
  width: 400px;
  height: 200px;
}

.child {
  /* 上下外边距 = 400px × 5% = 20px */
  /* 左右外边距 = 400px × 10% = 40px */
  margin: 5% 10%;
}

外边距合并

外边距合并（Margin Collapsing）是CSS中的一个重要概念，指的是两个或多个元素的外边距会合并成一个单一的外边距。外边距合并只发生在垂直方向（上下外边距），水平方向（左右外边距）不会合并。

相邻元素的外边距合并

当两个相邻元素的上下外边距相遇时，它们会合并成一个外边距，合并后的外边距大小等于两个外边距中较大的那个。

html 
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
css 
.box1 { margin-bottom: 30px; background-color: red; }
.box2 { margin-top: 20px; background-color: blue; }
/* 两个元素之间的实际间距是30px（取较大值），而不是50px */

父元素与子元素的外边距合并

当父元素没有内边距、边框或清除浮动时，父元素的上外边距会与第一个子元素的上外边距合并，父元素的下外边距会与最后一个子元素的下外边距合并。

html 
<div class="parent">
  <div class="child">Child</div>
</div>
css 
.parent { margin-top: 20px; background-color: red; }
.child { margin-top: 30px; background-color: blue; }
/* 父元素的实际上边距是30px（取较大值），而不是50px */

空元素的外边距合并

如果一个元素没有内容、内边距和边框，它的上下外边距会合并成一个单一的外边距。

html 
<div class="empty"></div>
css 
.empty { margin-top: 20px; margin-bottom: 30px; }
/* 元素的实际外边距是30px（取较大值），而不是50px */

防止外边距合并的方法

  1. 为父元素添加内边距或边框：padding: 1px; 或 border: 1px solid transparent;
  2. 为父元素添加 overflow: hidden 或 overflow: auto
  3. 使用 display: inline-block
  4. 使用 Flexbox 或 Grid 布局（这些布局模型不会发生外边距合并）

负外边距

外边距可以设置为负值，这在某些布局技巧中非常有用，如：

  1. 增加元素宽度：负外边距可以使元素突破其父容器的宽度限制
  2. 调整元素位置：负外边距可以使元素向左或向上移动
  3. 创建重叠效果：负外边距可以使元素与其他元素重叠
css 
/* 增加元素宽度 */
.full-width {
  width: 100%;
  margin-left: -20px;
  margin-right: -20px;
}

/* 向上移动元素 */
.raise {
  margin-top: -10px;
}

/* 创建重叠效果 */
.overlap {
  margin-top: -30px;
}

水平居中元素

使用margin: 0 auto;可以水平居中块级元素（需要指定宽度）：

css 
.centered {
  width: 50%; /* 必须指定宽度 */
  margin: 0 auto; /* 上下外边距0，左右自动 */
}

行内元素的外边距

对于行内元素，左右外边距会影响元素的空间，但上下外边距不会影响行高，也不会使元素上下移动。

css 
span.highlight {
  margin: 10px; /* 只有左右外边距生效 */
  background-color: yellow;
}

浏览器兼容性

所有现代浏览器都支持margin属性及其所有值。

浏览器 Chrome Firefox Safari Edge IE
支持情况 支持 支持 支持 支持 支持

最佳实践

  1. 使用相对单位：优先使用em或rem等相对单位，使外边距与字体大小保持一致。
  2. 利用外边距合并：在垂直方向合理使用外边距合并，可以简化布局代码。
  3. 避免过度使用负外边距：负外边距虽然强大，但容易导致布局混乱，应谨慎使用。
  4. 使用 margin: 0 auto 居中元素：这是水平居中块级元素的标准方法。
  5. 考虑响应式设计：在小屏幕设备上适当减少外边距，提高内容的可见性。

小结

外边距是CSS盒模型的重要组成部分，用于控制元素与元素之间的距离。通过margin属性及其相关子属性，可以灵活地设置元素四个方向的外边距。外边距合并是CSS中的一个重要概念，需要特别注意垂直方向的外边距合并现象。合理使用外边距可以创建清晰、美观的页面布局。

最后更新：2026-02-07