padding-block

プレビューは横書きなので、始まりが上、終わりが下です。

値の書き方

• 値を 1 つ書くと両側に、2 つ書くと始まり（padding-block-start）と終わり（padding-block-end）の順に効きます。
• 書ける値は padding と同じで、長さと % です。負の値と auto は書けません。ブロック方向でも、% は親の箱のインライン方向の大きさ（横書きなら幅）に対する割合です。
• 初期値は 0 です。

向きで変わること

• writing-mode: vertical-rl の縦書きでは行が右から左へ進むので、始まりが右、終わりが左になります。vertical-lr では始まりが左です。
• どの辺になるかは、親ではなくその要素自身の writing-mode で決まります。direction では変わりません。

よく使う場面

セクションやカードの上下の余白に使います。縦書きのページでも、行が進む向きの両端に余白が付きます。

気をつけること

• margin-block とちがい、padding は隣の要素の余白と相殺されません。
• 横書きでは padding-top・padding-bottom と同じ辺を指します。同じ要素に両方書くと、後に書いたほうが効きます。
• 主要なブラウザすべてで使えます。