边距

margin 属性定义盒子模型的最外层部分，在元素周围创建空间，位于任何定义边框的外部。

边距使用长度、百分比或关键字 auto 设置，可以具有负值。 以下是一个示例

.box {
  margin: 0 3em 0 3em;
}

margin 是一个简写属性，接受最多四个值，如下所示

.box {
    margin: <margin-top> || <margin-right> || <margin-bottom> || <margin-left>
}</margin-left></margin-bottom></margin-right></margin-top>

如果设置的值少于四个，则根据已定义的值推断缺失的值。 例如，以下两个规则集将获得相同的结果

.box {
  margin: 0 1.5em;
}

.box {
  margin: 0 1.5em 0 1.5em;
}

因此，如果只定义了一个值，则将所有四个边距设置为相同的值。 如果声明了三个值，则为 margin: [top] [left-and-right] [bottom];。

任何单独的边距都可以使用完整写法声明，在这种情况下，您将为每个属性定义一个值

.box {
  margin-top: 20px;
  margin-right: 10px;
  margin-bottom: 20px;
  margin-left: 10px;
}

auto 和居中

每个边距属性也可以接受 auto 值。 auto 值基本上告诉浏览器为您定义边距。 在大多数情况下，auto 值将等效于 0 值（这是每个边距属性的初始值）或元素该侧的可用空间。 但是，auto 对水平居中很有用

.container {
  width: 980px;
  margin: 0 auto;
}

在这个示例中，做了两件事来将此元素水平居中于可用空间内

• 元素被赋予一个指定的宽度
• 左右边距设置为 auto

如果没有指定宽度，auto 值基本上不会有任何效果，将左右边距设置为 0 或父元素内的可用空间。

还应该指出的是，auto 仅对水平居中有用，因此对上下边距使用 auto 不会垂直居中元素，这对于初学者来说可能会令人困惑。

折叠边距

相互接触的不同元素上的垂直边距（因此没有内容、填充或边框将它们隔开）将折叠，形成一个单一边距，该边距等于相邻边距中较大的一个。 这种情况不会发生在水平边距（左右）上，只发生在垂直（上下）上。

为了说明这一点，请看以下 HTML

<h2>Collapsing Margins</h2>



Example text.

以及以下 CSS

h2 {
  margin: 0 0 20px 0;
}

p {
  margin: 10px 0 0 0;
}

在这个示例中，h2 元素被赋予 20px 的底部边距。 段落元素紧随其后出现在源代码中，其顶部边距设置为 10px。

常识似乎表明，h2 和段落之间的垂直边距厚度总共应为 30px（20px + 10px）。 但是由于边距折叠，实际厚度最终为 20px。 这在下面的嵌入式笔中得到了证明

Check out this Pen!

虽然折叠边距乍一看似乎不直观，但实际上它们出于几个原因是有用的。 首先，它们可以防止空元素添加额外的、通常不希望出现的垂直边距空间。

其次，它们允许采用更一致的方法来声明页面元素上的通用边距。 例如，标题通常具有垂直边距空间，段落也是如此。 如果边距不折叠，紧随段落之后的标题（反之亦然）通常需要重置其中一个元素的边距，以实现一致的垂直间距。

第三，边距折叠也适用于嵌套元素。 看一下下面的笔

Check out this Pen!

在这里，段落元素的顶部边距设置为 30px，并且嵌套在具有 40px 顶部边距的 div 元素内。 此外，h2 元素的底部边距为 20px。

同样，常识似乎表明，这里总的垂直边距空间应该为 90px（20px + 40px + 30px），但相反，所有边距都折叠成一个 40px 的边距（三个边距中最大的一个）。 在大多数情况下，这很有用，因为无需重新定义任何顶部边距来删除额外的垂直空间。

负边距

正如您可能猜到的，虽然正边距值会将其他元素推开，但负边距会将元素本身拉向该方向，或将其他元素拉向它。

以下是一个带有填充的容器的示例，标题 h2 具有负边距，将其自身拉过填充到边缘

查看笔
负边距最常见的用例 作者 Chris Coyier (@chriscoyier)
在 CodePen 上。

以下是一个示例，其中第一个段落具有负底部边距，这会将下一个段落向上拉。

查看笔
负边距拉动底部段落 作者 Chris Coyier (@chriscoyier)
在 CodePen 上。

相关属性

• 填充

其他资源

• W3C 上的边距
• MDN 上的边距
• 更多关于折叠边距的信息

浏览器支持

Chrome	Safari	Firefox	Opera	IE	Android	iOS
有效	有效	有效	有效	有效	有效	有效

IE6 易于出现 浮动边距加倍错误，这在大多数情况下可以通过在浮动元素中添加 display: inline 来解决。