CSS padding-block-start 属性

定義と使用方法

の 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 属性の結果。英語ページでは、ブロック方向は下に向かっており、行内方向は左から右です。

ブロック方向の開始位置にインセットを設定します：

p {
  padding-block-start: 35px;
}

以下の<div>要素の writing-mode 属性値がvertical-rlに設定されている場合、ブロック方向は右から左です。結果として、要素の開始位置は上から右に移動します：

div {
  writing-mode: vertical-rl;
  padding-block-start: 50px;
}

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"

テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

クローム	エッジ	ファイアフォックス	サファリ	オペラ
87.0	87.0	41.0	12.1	73.0