特性

边距是指元素的边缘或者边框之外的空间，可以通过 CSS 边距属性进行控制。

如果要控制元素内的填充（空间），请改用填充属性。

使用边距属性时，通常用于创建与相邻元素的距离，但它们也可用于将元素彼此靠近，通常通过在元素上应用负边距来实现。

当元素发生碰撞时，元素的垂直边距可能会折叠。
例如，当段落元素都有顶部和底部边距时，边距将折叠为两者中最大的一个，因此 1em 和 2em 的边距变为 2em，而不是 3em。

水平边距永远不会塌陷。

Margin说明

每个元素都有四个可以更改的边距，每一边一个：顶部、右侧、底部和左侧。
这些可以通过面向方向的属性设置：

div {
  margin-top: 1em;
  margin-right: 1em;
  margin-bottom: 1em;
  margin-left: 1em;
}

应用边距的速记方式通常是更好的选择，并将按以下顺序工作：顶部、右侧、底部、左侧。
例如

div {
  margin: top right bottom left; /* Note. use a length value in place of these */
}

因此，使用长度值，上面实际上看起来像：

div {
  margin: 2em 1em 1em 2em;
}

我们还可以同时解决所有四个方面：

div {
  margin: 1em; /* All four sides have a margin of 1em */
}

可能的值

• auto (Default)
• Length unit
• initial
• inherit

居中元素

margin 属性通常用于通过将 right 和 left 值设置为 auto 来使元素居中。
要使元素居中，还需要应用宽度。
比如：

.MyBox {
  width: 50%;
  margin: 0 auto; /* top right bottom left */
}

以上是可能的，因为 margin 属性中未定义的值会自动复制它们的对立面。
因为我们没有定义左值，所以 auto 的右值被复制到左值。
顶部值和底部值相同。
等效的是将 margin-left 和 margin-right 属性设置为 auto。

使网站居中的一种常用方法是在页面周围使用 div 包装器，并设置所需的边距。

.PageWrap {
  width: 93%;
  min-width: 390px;
  max-width: 1900px;
  margin: 0 auto; /* top right bottom left */
}