CSS-Außenabstand

此元素的外边距为 70px。

Selbst ausprobieren

CSS-Außenabstand

CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间。

通过 CSS，您可以完全控制外边距。有一些属性可用于设置元素每侧（上、右、下和左）的外边距。

Margin - 单独的边

CSS 拥有用于为元素的每一侧指定外边距的属性：

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

所有外边距属性都可以设置以下值：

  • auto - 浏览器来计算外边距
  • length - 以 px、pt、cm 等单位指定外边距
  • % - 指定以包含元素宽度的百分比计的外边距
  • inherit - 指定应从父元素继承外边距

提示：允许负值。

Beispiel

为 <p> 元素的所有四个边设置不同的外边距：

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

Selbst ausprobieren

Margin - 简写属性

为了缩减代码，可以在一个属性中指定所有外边距属性。

margin 属性是以下各外边距属性的简写属性：

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

工作原理是这样的：

如果 margin 属性有四个值：

  • margin: 25px 50px 75px 100px;
    • 上外边距是 25px
    • 右外边距是 50px
    • 下外边距是 75px
    • 左外边距是 100px

Beispiel

margin 简写属性设置四个值：

p {
  margin: 25px 50px 75px 100px;
}

Selbst ausprobieren

如果 margin 属性设置三个值：

  • margin: 25px 50px 75px;
    • 上外边距是 25px
    • 右和左外边距是 50px
    • 下外边距是 75px

Beispiel

使用已设置三个值的 margin 简写属性：

p {
  margin: 25px 50px 75px;
}

Selbst ausprobieren

如果 margin 属性设置两个值：

  • margin: 25px 50px;
    • 上和下外边距是 25px
    • 右和左外边距是 50px

Beispiel

使用设置了两个值的 margin 简写属性：

p {
  margin: 25px 50px;
}

Selbst ausprobieren

如果 margin 属性设置了一个值：

  • margin: 25px;
    • 所有四个外边距都是 25px

Beispiel

使用设置一个值的 margin 简写属性：

p {
  margin: 25px;
}

Selbst ausprobieren

auto 值

Sie können die margin-Eigenschaft auf auto, um das Element horizontal in der Mitte seines Containers zentriert zu haben.

Dann wird das Element die angegebene Breite einnehmen und der verbleibende Raum wird zwischen den linken und rechten Grenzen gleichmäßig aufgeteilt.

Beispiel

Verwenden Sie margin: auto:

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

Selbst ausprobieren

inherit-Wert

Dieser Beispiel macht den linken Außenabstand des <p class="ex1">-Elements von seinem Elternelement (<div>) erben:

Beispiel

Verwenden Sie den Wert inherit:

div {
  border: 1px solid red;
  margin-left: 100px;
}
p.ex1 {
  margin-left: inherit;
}

Selbst ausprobieren

Erweiternde Lektüre

Extrakurse:Box-Modell: CSS Außenabstand