CSS padding-block-start 屬性

定義和用法

元素的 padding-block-start 是指在其塊方向起始處,從邊框到內容的空間。

CSS padding-blockpadding-inline 屬性與 CSS 屬性 padding-toppadding-bottompadding-leftpadding-right 非常相似,但 padding-blockpadding-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

相關頁面

參考:CSS padding-block 屬性

參考:CSS padding-block-end 屬性

參考:CSS padding-inline 屬性

參考:CSS padding-bottom 屬性

參考:CSS padding-left 屬性

參考:CSS padding-right 屬性

參考:CSS padding-top 屬性

參考:CSS writing-mode 屬性