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
让浏览器自己选择一个合适的外边距。有时,在一些特殊情况下,该值可以使元素居中。

语法格式

[ <length> | <percentage> | auto ]{1,4}

示例

简单的例子

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

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
marginChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
autoChrome Full support 1Edge Full support 12
Notes
Full support 12
Notes
Notes The auto value is not supported in quirks mode.
Firefox Full support 1IE Full support 6
Notes
Full support 6
Notes
Notes The auto value is not supported in quirks mode.
Opera Full support 3.5Safari Full support 1WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
See implementation notes.
See implementation notes.

参阅