margin 外边距属性

最后更新：2026-09-13

margin margin 外边距属性

margin 属性用于设置元素周围的外部空间，即元素边框与其他元素之间的距离。它是 CSS 盒模型中最常用的属性之一，常用于控制元素之间的间距、实现水平居中以及在元素周围留出呼吸空间。margin 可以是固定长度、百分比，也可以使用 auto 让浏览器自动计算。

分类
初始值	0
继承	否
适用于	all
可动画	length
CSS 版本	CSS1
状态	标准

📝 语法

margin: <length> | <percentage> | auto;

⚙️ 取值

值	类型	描述
`auto`	关键字	浏览器自动计算外边距
`<length>`	类型	固定外边距值
`<percentage>`	类型	相对包含块宽度的百分比

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
margin	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

注意： 相邻垂直方向的外边距会发生"外边距折叠"（margin collapse），实际间距取两者中的较大值，而非相加。

提示： 使用 margin: 0 auto; 可以让块级元素在其父容器中水平居中（需设置明确宽度）。

❓ 常见问题

Qmargin 和 padding 有什么区别？

Amargin 是元素边框之外的外边距，控制元素与相邻元素或容器边缘的距离，允许负值；padding 是内容与边框之间的内边距，控制内容与盒子边界的关系，不允许负值。另外 padding 会扩大背景色和点击区域范围，margin 不会；margin 会发生垂直方向的外边距折叠，padding 不会。

Q为什么 margin:auto 只能水平居中不能垂直居中？

A因为块级元素的水平外边距会自动瓜分剩余空间实现居中，而普通文档流的垂直方向没有此机制。垂直居中方案：flex 父元素 display:flex; align-items:center; justify-content:center；或 grid 父元素 display:grid; place-items:center。

Q什么是外边距折叠（margin collapse）？

A垂直方向上，相邻元素的上/下外边距不相加，而取较大值作为间距，即外边距折叠。子元素 margin-top 也可能穿透到父元素外。避免：父元素加 padding/border、设 overflow:hidden、或用 flex/grid。水平方向永不折叠。

Qmargin 的百分比是相对于谁的？

Amargin 的百分比始终相对于包含块的宽度（inline size）计算，包括 margin-top 和 margin-bottom 也按宽度算，而不是按高度。例如父容器宽度 400px 时，margin-top:10% 等于 40px。这是 CSS 的既定规则，容易让人误解，需要特别留意。