margin 属性为给定元素设置所有四个（上右下左）方向的外边距属性。也就是 {{cssxref("margin-top")}}、{{cssxref("margin-right")}}、{{cssxref("margin-bottom")}} 和 {{cssxref("margin-left")}} 四个外边距属性设置的简写。

```css interactive-example-choice margin: 1em;


```css interactive-example-choice
margin: 5% 0;

```css interactive-example-choice margin: 10px 50px 20px;


```css interactive-example-choice
margin: 10px 50px 20px 0;

```css interactive-example-choice margin: 0;


```html interactive-example
<section id="default-example">
  <div id="container">
    <div class="row"></div>
    <div class="row transition-all" id="example-element"></div>
    <div class="row"></div>
  </div>
</section>

```css interactive-example

container {

width: 300px; height: 200px; display: flex; align-content: flex-start; flex-direction: column; justify-content: flex-start; }

.row { height: 33.33%; display: inline-block; border: solid #ce7777 10px; background-color: #2b3a55; flex-shrink: 0; }

example-element {

border: solid 10px #ffbf00; background-color: #2b3a55; }


## 组成属性

此属性是以下 CSS 属性的简写：

- {{cssxref("margin-top")}}
- {{cssxref("margin-right")}}
- {{cssxref("margin-bottom")}}
- {{cssxref("margin-left")}}

## 语法

```css
/* 应用于所有边 */
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 个值。每个值可以是 {{cssxref("<length>")}}，{{cssxref("<percentage>")}}，或 auto。取值为负时元素会比原来更接近临近元素。

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

可取值

{{cssxref("length")}}
- : 以固定值为外边距。
{{cssxref("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%;
}

贴士

水平居中

在现代浏览器中实现水平居中，可以使用 {{cssxref("display")}}: flex; {{cssxref("justify-content")}}: center;。

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

外边距重叠

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

w3study.net