CSS 外邊距
外邊距用於在元素周圍建立空間，在其任何定義的邊框之外。
此元素的邊距為 70px。
自己動手試一試 »
CSS 外邊距
CSS margin 屬性用於在元素周圍建立空間，在其任何定義的邊框之外。
使用 CSS，您可以完全控制外邊距。有用於設定元素每個側面（上、右、下、左）外邊距的屬性。
外邊距 - 單獨的側邊
CSS 具有指定元素每個側面外邊距的屬性
margin-topmargin-rightmargin-bottommargin-left
所有外邊距屬性都可以具有以下值
- auto - 瀏覽器將計算外邊距
- length - 以 px、pt、cm 等為單位指定外邊距
- % - 以包含元素寬度的百分比指定外邊距
- inherit - 指定外邊距應從父元素繼承
提示：允許使用負值。
示例
為 <p> 元素的四個側面設定不同的外邊距
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
自己動手試一試 »
外邊距 - 簡寫屬性
為了縮短程式碼，可以將所有外邊距屬性都寫在一個屬性中。
margin 屬性是以下各個外邊距屬性的簡寫屬性
margin-topmargin-rightmargin-bottommargin-left
所以，它是這樣工作的
如果 margin 屬性有四個值
- margin: 25px 50px 75px 100px;
- 上外邊距為 25px
- 右外邊距為 50px
- 下外邊距為 75px
- 左外邊距為 100px
如果 margin 屬性有三個值
- margin: 25px 50px 75px;
- 上外邊距為 25px
- 右外邊距和左外邊距為 50px
- 下外邊距為 75px
如果 margin 屬性有兩個值
- margin: 25px 50px;
- 上外邊距和下外邊距為 25px
- 右外邊距和左外邊距為 50px
如果 margin 屬性有一個值
- margin: 25px;
- 所有四個外邊距均為 25px
auto 值
您可以將 margin 屬性設定為 auto，以在其容器內水平居中元素。
然後，元素將佔據指定的寬度，剩餘空間將在左外邊距和右外邊距之間平均分配。
inherit 值
此示例允許 <p class="ex1"> 元素的左外邊距從父元素 (<div>) 繼承
示例
inherit 值的用法
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
自己動手試一試 »
所有 CSS 外邊距屬性
| 屬性 | 描述 |
|---|---|
| margin | 在一個宣告中設定所有外邊距屬性的簡寫屬性 |
| margin-bottom | 設定元素的底部 margin |
| margin-left | 設定元素的左 margin |
| margin-right | 設定元素的右 margin |
| margin-top | 設定元素的頂部 margin |
