CSS margin 屬性
更多“自己嘗試”的例子見下文。
定義和用法
margin 屬性設定元素的邊距，它是以下屬性的簡寫屬性：
如果 margin 屬性有四個值
- margin: 10px 5px 15px 20px;
- 上外邊距為 10px
- 右外邊距為 5px
- 下外邊距為 15px
- 左外邊距為 20px
如果 margin 屬性有三個值
- margin: 10px 5px 15px;
- 上外邊距為 10px
- 右外邊距和左外邊距為 5px
- 下外邊距為 15px
如果 margin 屬性有兩個值
- margin: 10px 5px;
- 上外邊距和下外邊距為 10px
- 右外邊距和左外邊距為 5px
如果 margin 屬性有一個值
- margin: 10px;
- 所有四個外邊距均為 10px
注意： 允許使用負值。
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| margin | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
CSS 語法
margin: length|auto|initial|inherit;
屬性值
| 值 | 描述 | 演示 |
|---|---|---|
| length | 指定以 px、pt、cm 等為單位的外邊距。預設值為 0。允許使用負值。 閱讀長度單位 | 演示 ❯ |
| % | 指定相對於包含元素寬度的百分比外邊距 | 演示 ❯ |
| auto | 瀏覽器計算外邊距 | 演示 ❯ |
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
外邊距摺疊
元素的頂部和底部外邊距有時會摺疊成一個單獨的外邊距，該外邊距等於兩個外邊距中較大的那個。
水平（左和右）外邊距不會發生這種情況！僅垂直（上和下）外邊距！
看下面的例子
在上面的示例中，<p class="a"> 元素的上外邊距和下外邊距為 30px。<p class="b"> 元素的上外邊距和下外邊距為 20px。
這意味著 <p class="a"> 和 <p class="b"> 之間的垂直外邊距應該是 50px (30px + 20px)。但由於外邊距摺疊，實際外邊距最終為 30px！
更多示例
示例
將 <p> 元素的上外邊距設定為 35 畫素，右外邊距設定為 70 畫素，下外邊距設定為 50 畫素，左外邊距設定為 90 畫素
p {
margin: 35px 70px 50px 90px;
}
自己動手試一試 »
相關頁面
CSS 教程：CSS 外邊距
CSS 教程： CSS 盒子模型
HTML DOM 參考： margin 屬性
