↑

CSS3

：

プロパティ

：

padding-block、padding-inline

　 編集：2022.07.17 by T.A.

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

余白（ブロック／インライン）： 略式プロパティ。

名前 padding-block、
padding-inline
値 <'padding-top'>{1,2}
初期値 個々のプロパティを見よ
適用対象 個々のプロパティを見よ
継承 個々のプロパティを見よ
百分率 個々のプロパティを見よ
算出値 個々のプロパティを見よ
正準的順序 文法に従う
アニメーション型 個々のプロパティを見よ

これら 2 つの略式プロパティは、順に、［padding-block-start、padding-block-end］、［padding-inline-start、padding-inline-end］を設定する。2 個の値は、順に［始端、終端］辺のスタイルを表現する。値が 1 個だけ与えられた場合、それが 2 個目の値にも利用される。 

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

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

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

テスト
HTML：

ここに表示
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：