边距 | margin

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;

初始值	as each of the properties of the shorthand: margin-bottom: 0 margin-left: 0 margin-right: 0 margin-top: 0
适用元素	all elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter.
是否是继承属性	no
Percentages	refer to the width of the containing block
适用媒体	visual
计算值	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 type	a length
正规顺序	the unique non-ambiguous order defined by the formal grammar

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%;
}

注

水平居中

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

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

边缘崩溃

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

规范

Specification	Status	Comment
CSS Basic Box ModelThe definition of 'margin' in that specification.	Working Draft	No significant change.
CSS TransitionsThe definition of 'margin' in that specification.	Working Draft	Defines margin as animatable.
CSS Level 2 (Revision 1)The definition of 'margin' in that specification.	Recommendation	Removes its effect on inline elements.
CSS Level 1The definition of 'margin' in that specification.	Recommendation	Initial definition.

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	(Yes)	1.0 (1.7 or earlier)	3.0	3.5	1.0 (85)
auto value	1.0	?	1.0 (1.7 or earlier)	6.0 (strict mode)	3.5	1.0 (85)

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	1.0	(Yes)	1.0 (1)	6.0	6.0	1.0