CSS padding-inline 屬性
- 上一頁 padding-bottom
- 下一頁 padding-inline-end
定義和用法
元素的 padding-inline 是指在其行內方向上，從邊框到內容的空間。它是以下屬性的簡寫屬性：
padding-inline 屬性的值可以通過不同的方式設置：
如果 padding-inline 屬性有兩個值：
padding-inline: 10px 50px;
- 起始端的內邊距是 10px
- 結束端的內邊距是 50px
如果 padding-inline 屬性有一個值：
padding-inline: 10px;
- 起始端和結束端的內邊距都是 10px
CSS padding-inline 和 padding-block 屬性與 CSS 屬性 padding-top、padding-bottom、padding-left 和 padding-right 非常相似，但 padding-inline 和 padding-block 屬性依賴于行內方向和塊方向。
注意：相關的 CSS 屬性 writing-mode 和 direction 定義了行內方向。這會影響元素在行內方向上的起始和結束位置，以及 padding-inline 屬性的結果。對于英文頁面，塊方向是向下，行內方向是從左到右。
實例
例子 1
在行內方向的兩邊設置內邊距：
div {
padding-inline: 50px;
}
例子 2
當 <div> 元素的 writing-mode 屬性值設置為 vertical-rl 時，行內方向是向下。結果是元素的起始端從左側移到了頂部，結束端從右側移到了底部：
div {
writing-mode: vertical-rl;
padding-inline: 10px 100px;
}
例子 3
當 <div> 元素的 direction 屬性值設置為 rtl 時，行內方向是從右到左。結果是元素的起始端從左側移到了右側，結束端從右側移到了左側：
div {
direction: rtl;
padding-inline: 10px 100px;
}
CSS 語法
padding-inline: auto|value|initial|inherit;
屬性值
| 值 | 描述 |
|---|---|
| auto | 默認。元素的默認 padding-inline 距離。 |
| length |
以 px、pt、cm 等單位指定距離。不允許負值。 請參閱：CSS 單位。 |
| % | 以父元素在行內方向上的大小的百分比指定距離。 |
| initial | 將此屬性設置為其默認值。參閱 initial。 |
| inherit | 從其父元素繼承此屬性。參閱 inherit。 |
技術細節
| 默認值： | auto |
|---|---|
| 繼承性： | 否 |
| 動畫制作： | 支持。請參閱：動畫相關屬性。 |
| 版本： | CSS3 |
| JavaScript 語法： | object.style.paddingInline="100px 20px" |
瀏覽器支持
表格中的數字表示首個完全支持該屬性的瀏覽器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 87.0 | 87.0 | 66.0 | 14.1 | 73.0 |
相關頁面
- 上一頁 padding-bottom
- 下一頁 padding-inline-end
