边距 | margin

margin属性为给定元素设置所有四个（上下左右）方向的外边距属性。这是四个外边距属性设置的简写。四个外边距属性设置分别是： margin-top，margin-right，margin-bottom和margin-left。指定的外边距允许为负数。

/* Apply to all four sides */
margin: 1em;

/* vertical | horizontal */
margin: 5% auto;

/* top | horizontal | bottom */
margin: 1em auto 2em; 

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

/* Global values */
margin: inherit;
margin: initial;
margin: unset;

• margin-bottom：0

• margin-left：0

• margin-right：0

• margin-top：0

Applies to all elements, except elements with table [`display`](display) types other than `table-caption`, `table` and `inline-table`. It also applies to [`::first-letter`](::first-letter).   [Inherited](inheritance) no   Percentages refer to the width of the containing block   Media visual   [Computed value](computed_value) as each of the properties of the shorthand:

• margin-bottom：指定的百分比或绝对长度

• margin-left：指定的百分比或绝对长度

• margin-right：指定的百分比或绝对长度

• margin-top：指定的百分比或绝对长度

Animation type a [length](length#Interpolation)    Canonical order the unique non-ambiguous order defined by the formal grammar  

语法

该margin属性可以使用一个，两个，三个或四个值来指定。每个值都是a <length>，a <percentage>或关键字auto。每个值可以是正值，零值或负值。

• 当指定一个值时，它将对所有四边应用相同的边距。

• 当指定两个值时，第一个边距适用于顶部和底部，第二个边距适用于左侧和右侧。

• 当3个被指定的值时，第一余量适用于顶部，第二至左边和右边，第三至底部。

• 当指定四个值时，页边距按顺序应用于顶部，右侧，底部和左侧（顺时针）。

值

<length>保证金的大小为固定值。<percentage>边距的大小，以百分比为单位，相对于包含块的宽度。auto浏览器选择一个合适的边距来使用。例如，在某些情况下，这个值可以用来居中一个元素。

正式语法

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

示例

简单例子

HTML

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

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

CSS

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

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

更多的例子

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 */

注

水平居中

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

然而, 在一些老的浏览器，如IE8-9, 这些是不可用的. 想要把一个元素在其父元素中居中, 使用 margin: 0 auto;

边缘崩溃

元素的顶部和底部利润率有时会折叠成一个单一的利润率，等于两个利润率中最大的一个。请参阅掌握边缘折叠以获取更多信息。

规范

浏览器兼容性