CSS padding-block 属性

定義と使用法

要素の padding-block これは、境界線から内容までのブロック方向のスペースを指し、以下の属性の短縮形です：

• padding-block-start
• padding-block-end

padding-block 属性的値は異なる方法で設定することができます：

属性の値は異なる方法で設定できます：

padding-block: 10px 50px;

• padding-block属性に値が2つある場合：
• 開始位置のインラインパディングは10pxです

終了位置のインラインパディングは50pxです

padding-block属性に値が1つある場合：

• padding-block: 10px;

の開始位置と終了位置のインラインパディングがすべて10pxです padding-block 非常に似ていますが、 と CSS 属性はCSS属性padding-bottompadding-toppadding-bottom、 非常に似ていますが、 padding-left padding-right padding-block 非常に似ていますが、 と padding-inline

属性はブロック方向とインライン方向に依存しています。注意： writing-mode ブロック方向を定義します。これはブロックの開始位置と終了位置に影響を与え、関連するCSS属性に影響を与えます。 padding-block 属性の結果。英語ページでは、ブロック方向は下に向かっており、インライン方向は左から右に向かっています。

例

例1

ブロック方向の両側のインラインパディングを設定します：

p {
  padding-block: 35px;
}

実際に試してみてください

例2

次の<div>要素の writing-mode 属性値がvertical-rlに設定されている場合、要素の開始位置は上から右に、終了位置は下から左に移動します：

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

実際に試してみてください

CSS文法

padding-block: auto|value|initial|inherit;

属性値

技術的な詳細

ブラウザのサポート

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

関連ページ

参考：CSS padding-block-end 属性

参考：CSS padding-block-start 属性

参考：CSS padding-inline 属性

参考：CSS padding-bottom 属性

参考：CSS padding-left 属性

参考：CSS padding-right 属性

参考：CSS padding-top 属性

参考：CSS writing-mode 属性