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