CSS 外邊距

此元素的外邊距為 70px。

親自試一試

CSS 外邊距

CSS margin 屬性用于在任何定義的邊框之外，為元素周圍創建空間。

通過 CSS，您可以完全控制外邊距。有一些屬性可用于設置元素每側（上、右、下和左）的外邊距。

Margin - 單獨的邊

CSS 擁有用于為元素的每一側指定外邊距的屬性：

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

所有外邊距屬性都可以設置以下值：

  • auto - 瀏覽器來計算外邊距
  • length - 以 px、pt、cm 等單位指定外邊距
  • % - 指定以包含元素寬度的百分比計的外邊距
  • inherit - 指定應從父元素繼承外邊距

提示：允許負值。

實例

為 <p> 元素的所有四個邊設置不同的外邊距：

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

親自試一試

Margin - 簡寫屬性

為了縮減代碼，可以在一個屬性中指定所有外邊距屬性。

margin 屬性是以下各外邊距屬性的簡寫屬性：

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

工作原理是這樣的：

如果 margin 屬性有四個值：

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

實例

margin 簡寫屬性設置四個值：

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

親自試一試

如果 margin 屬性設置三個值：

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

實例

使用已設置三個值的 margin 簡寫屬性：

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

親自試一試

如果 margin 屬性設置兩個值：

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

實例

使用設置了兩個值的 margin 簡寫屬性：

p {
  margin: 25px 50px;
}

親自試一試

如果 margin 屬性設置了一個值：

  • margin: 25px;
    • 所有四個外邊距都是 25px

實例

使用設置一個值的 margin 簡寫屬性：

p {
  margin: 25px;
}

親自試一試

auto 值

您可以將 margin 屬性設置為 auto，以使元素在其容器中水平居中。

然后，該元素將占據指定的寬度，并且剩余空間將在左右邊界之間平均分配。

實例

使用 margin: auto：

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

親自試一試

inherit 值

本例使 <p class="ex1"> 元素的左外邊距繼承自父元素（<div>）：

實例

使用 inherit 值：

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

親自試一試

延伸閱讀

課外書：框模型：CSS 外邊距