margin

margin 属性为给定元素设置所有四个(上下左右)方向的外边距属性。也就是 margin-topmargin-rightmargin-bottom,和 margin-left 四个外边距属性设置的简写

上、下外边框的设置对可替换内联元素,如 <span><code>,无效。

注意: 外边距控制的是元素外部空出的空间。相反,padding 操作元素内部空出的空间。

语法

/* 应用于所有边 */
margin: 1em;
margin: -3px;

/* 上边下边 | 左边右边 */
margin: 5% auto;

/* 上边 | 左边右边 | 下边 */
margin: 1em auto 2em;

/* 上边 | 右边 | 下边 | 左边 */
margin: 2px 1em 0 auto;

/* 全局值 */
margin: inherit;
margin: initial;
margin: unset;

margin 属性接受 1~4 个值。每个值可以是 <length><percentage>,或 auto。取值为负时元素会比原来更接近临近元素。

  • 当只指定一个值时,该值会统一应用到全部四个边的外边距上。
  • 指定两个值时,第一个值会应用于上边和下边的外边距,第二个值应用于左边和右边
  • 指定三个值时,第一个值应用于上边,第二个值应用于右边和左边,第三个则应用于下边的外边距。
  • 指定四个值时,依次(顺时针方向)作为上边右边下边,和左边的外边距。

可取值

length
以固定值为外边距。
percentage
相对于包含块宽度,以百分比值为外边距。
auto
让浏览器自己选择一个合适的外边距。有时,在一些特殊情况下,该值可以使元素居中。

语法格式

示例

简单的例子

HTML

<div class="center">此元素会被居中。</div>

<div class="outside">此元素会显示在包含块之外。</div>

CSS

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

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

更多的例子

margin: 5%;                 /* 所有边:5% 的外边距 */

margin: 10px;               /* 所有边:10px 的外边距 */

margin: 1.6em 20px;         /* 上边和下边:1.6em 的外边距 */
                            /* 左边和右边:20px 的外边距  */

margin: 10px 3% -1em;       /* 上边:     10px 的外边距 */
                            /* 左边和右边:3% 的外边距   */
                            /* 下边:     -1em 的外边距 */

margin: 10px 3px 30px 5px;  /* 上边:10px 的外边距 */
                            /* 右边:3px 的外边距  */
                            /* 下边:30px 的外边距 */
                            /* 左边:5px 的外边距  */

margin: 2em auto;           /* 上边和下边:2em 的外边距 */
                            /* 水平方向居中            */

margin: auto;               /* 上边和下边:无外边距 */
                            /* 水平方向居中        */

贴士

水平居中

在现代浏览器中实现水平居中,可以使用 display: flex; justify-content: center;

不过,在 IE8-9 这样的不支持弹性盒布局的旧式浏览器中,上述代码并不会生效。此时要实现在父元素中居中,可使用 margin: 0 auto;

外边距重叠

上下元素的下上外边距有时会重叠,实际空出的空间长度变为两外边距中的较长值。查看外边距重叠可找到更多信息。

规范

规范 阶段 备注
CSS Basic Box Model
margin
Working Draft 没有明显变更。
CSS Level 2 (Revision 1)
margin
Recommendation 削去内联元素上下方向的外边距的作用。
CSS Level 1
margin
Recommendation 初始定义。
初始值as each of the properties of the shorthand:
适用元素all elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter and ::first-line.
是否是继承属性
Percentagesrefer to the width of the containing block
计算值as each of the properties of the shorthand:
  • margin-bottom: the percentage as specified or the absolute length
  • margin-left: the percentage as specified or the absolute length
  • margin-right: the percentage as specified or the absolute length
  • margin-top: the percentage as specified or the absolute length
Animation typea length

浏览器兼容性

BCD tables only load in the browser

参阅