CSS3

：

プロパティ

：

padding-block-start、padding-block-end、padding-inline-start、padding-inline-end

　 編集：2022.07.17 by T.A.

→●、mdn（padding-block-start、padding-block-end、padding-inline-start、padding-inline-end）

フロー相対なパディング。

名前 padding-block-start、
padding-block-end、
padding-inline-start、
padding-inline-end
値 <'padding-top'>
初期値 0
適用対象 padding-top プロパティと同じ
継承 されない
百分率 対応する物理プロパティに対するときと同じ
算出値 対応する padding-＊ プロパティと同じ
正準的順序 文法に従う
アニメーション型 算出値の型による

これらの各プロパティは［padding-top／padding-bottom／padding-left／padding-right］プロパティに対応する。その対応付けは、要素の［writing-mode、direction、text-orientation］に依存する。 

開始<SPAN style="border:1px solid red;
 padding-block-start:5px;
 padding-block-end:15px;
">内容</SPAN>終了


開始<SPAN style="border:1px solid red;
 padding-inline-start:5px;
 padding-inline-end:15px;
">内容</SPAN>終了


<DIV style="border:1px solid black;
 writing-mode:vertical-rl;
 width:100px; height:150px;
">
 開始<SPAN style="border:1px solid red;
  padding-block-start:5px;
  padding-block-end:15px;
 ">内容</SPAN>終了
</DIV>

テスト
HTML：

ここに表示
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：