margin

margin 属性是一个 CSS 简写属性，它设置元素所有四边的 外边距区域。

试一试

组成属性

此属性是以下 CSS 属性的简写形式

语法

css
/* Apply to all four sides */
margin: 1em;
margin: -3px;

/* top and bottom | left and right */
margin: 5% auto;

/* top | left and right | bottom */
margin: 1em auto 2em;

/* top | right | bottom | left */
margin: 2px 1em 0 auto;

/* Global values */
margin: inherit;
margin: initial;
margin: revert;
margin: revert-layer;
margin: unset;

margin 属性可以使用一个、两个、三个或四个值来指定。每个值都是一个 <length>、一个 <percentage> 或关键字 auto。负值会将元素拉近到其邻居，而不是默认情况下的距离。

  • 当指定 **一个** 值时，它会对 **所有四边** 应用相同的边距。
  • 当指定 **两个** 值时，第一个边距应用于 **顶部和底部**，第二个边距应用于 **左边和右边**。
  • 当指定 **三个** 值时，第一个边距应用于 **顶部**，第二个边距应用于 **右边和左边**，第三个边距应用于 **底部**。
  • 当指定 **四个** 值时，边距将按顺序应用于 **顶部**、**右边**、**底部** 和 **左边** （顺时针方向）。

Values

<length>

边距的大小，以固定值表示。

<percentage>

边距的大小，以百分比表示，相对于包含块的内联大小（在水平语言中为宽度，由 writing-mode 定义）。

auto

浏览器会选择一个合适的边距。例如，在某些情况下，此值可用于居中元素。

描述

此属性可用于设置元素所有四边的边距。边距会在元素周围创建额外的空间，不同于 padding，后者会在元素内部创建额外的空间。

顶部和底部边距对非替换 内联元素（例如 <span> 或 <code>）没有影响。

水平居中

您可以通过设置 `margin: 0 auto;` 来将元素在其父元素内水平居中。

水平居中元素的更常见方法是设置容器的 `display: flex;` 和 `justify-content: center;`，这将 居中其 flex 子项。

边距折叠

元素的顶部和底部边距有时会折叠成一个边距，该边距等于两个边距中较大的一个。有关更多信息，请参见 掌握边距折叠。

正式定义

初始值作为简写属性的每个属性
适用范围所有元素，除了具有表格 display 类型（除 table-caption、table 和 inline-table 外）的元素。它也适用于 ::first-letter。
继承否
百分比指的是包含块的宽度
计算值作为简写属性的每个属性
动画类型一个 长度

正式语法

margin = 
  <'margin-top'>{1,4}  

<margin-top> = 
  <length-percentage>  |
  auto                 

<length-percentage> = 
  <length>      |
  <percentage>

示例

简单示例

HTML

html
<div class="center">This element is centered.</div>

<div class="outside">This element is positioned outside of its container.</div>

CSS

css
.center {
  margin: auto;
  background: lime;
  width: 66%;
}

.outside {
  margin: 3rem 0 0 -3rem;
  background: cyan;
  width: 66%;
}

更多示例

css
margin: 5%; /* All sides: 5% margin */

margin: 10px; /* All sides: 10px margin */

margin: 1.6em 20px; /* top and bottom: 1.6em margin */
/* left and right: 20px margin */

margin: 10px 3% -1em; /* top:            10px margin */
/* left and right: 3% margin   */
/* bottom:         -1em margin */

margin: 10px 3px 30px 5px; /* top:    10px margin */
/* right:  3px margin  */
/* bottom: 30px margin */
/* left:   5px margin  */

margin: 2em auto; /* top and bottom: 2em margin   */
/* Box is horizontally centered */

margin: auto; /* top and bottom: 0 margin     */
/* Box is horizontally centered */

规范

规范
CSS 盒模型模块级别 3
# margin

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅