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