CSS padding 屬性
更多“自己嘗試”的例子見下文。
定義和用法
元素的 padding 是其內容和邊框之間的空間。
padding 屬性是以下屬性的簡寫屬性：
注意： padding 在元素內建立額外空間，而 margin 在元素周圍建立額外空間。
此屬性可以有從一到四個值。
如果 padding 屬性有四個值
- padding:10px 5px 15px 20px;
- top padding 為 10px
- right padding 為 5px
- bottom padding 為 15px
- left padding 為 20px
如果 padding 屬性有三個值
- padding:10px 5px 15px;
- top padding 為 10px
- right 和 left padding 為 5px
- bottom padding 為 15px
如果 padding 屬性有兩個值
- padding:10px 5px;
- top 和 bottom padding 為 10px
- right 和 left padding 為 5px
如果 padding 屬性有一個值
- padding:10px;
- 所有四個 padding 均為 10px
注意：不允許負值。
| 預設值 | 0 |
|---|---|
| 繼承 | no |
| 可動畫 | 是的，請參閱單個屬性。 閱讀關於可動畫屬性 嘗試一下 |
| 版本 | CSS1 |
| JavaScript 語法 | object.style.padding="100px 20px" 嘗試一下 |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| padding | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS 語法
padding: length|initial|inherit;
屬性值
| 值 | 描述 | 演示 |
|---|---|---|
| length | 指定以 px、pt、cm 等為單位的 padding。預設值為 0。 閱讀關於長度單位 | 演示 ❯ |
| % | 指定相對於包含塊元素寬度的百分比內邊距。 | 演示 ❯ |
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
示例
將 <p> 元素的 top 和 bottom padding 設定為 35 畫素，right 和 left 設定為 70 畫素
p {
padding: 35px 70px;
}
自己動手試一試 »
示例
將 <p> 元素的 top padding 設定為 35 畫素，right 和 left 設定為 70 畫素，bottom 設定為 50 畫素
p {
padding: 35px 70px 50px;
}
自己動手試一試 »
示例
將 <p> 元素的 top padding 設定為 35 畫素，right 設定為 70 畫素，bottom 設定為 50 畫素，left 設定為 90 畫素
p {
padding: 35px 70px 50px 90px;
}
自己動手試一試 »
相關頁面
CSS 教程： CSS 內邊距
CSS 教程： CSS 盒子模型
HTML DOM 參考： padding 屬性
