CSS

まずはかんたんに

padding-block は、上下のすき間（内側の余白）をまとめて指定できる便利なプロパティです。

「block方向（上下方向）」の padding-top と padding-bottom をいっぺんに設定できます。

たとえば、縦書きでも横書きでも「文字の流れの上下」に合わせて余白がつくので、書き方の向きが変わっても崩れにくいのが特徴です。

もう少し正確に

CSSには「論理プロパティ（logical properties）」という考え方があります。

これは、「上下・左右」といった見た目の位置ではなく、文章の流れ（書字方向）に合わせて余白をつけるための指定方法です。

padding-block

文章の流れに対して上下方向（ブロック方向）の余白

padding-inline

文章の流れに対して左右方向（インライン方向）の余白

横書き（日本語や英語）では「上下」、縦書き（縦書きレイアウト）では「左右」が対象になります。

つまり、書字方向が変わっても正しく余白をとってくれるのが大きなメリットです。

こう書けばOK（サンプルコード）

.box {
    padding-block: 20px;
}

この指定は、次のような書き方と同じ意味になります。

.box {
    padding-top: 20px;
    padding-bottom: 20px;
}

もちろん、上下で別の値を指定したいときはこう書けます：

.box {
    padding-block: 10px 30px; /* 上が10px、下が30px */
}

ポイントまとめ

• padding-block は、上下方向の余白をまとめて設定する。
• 書字方向（縦書き・横書き）に対応してくれる。
• 値を1つ書くと上下同じ余白、2つ書くと「上・下」で別々の余白を設定できる。
• 旧来の padding-top / padding-bottom と同じ役割だが、より柔軟で国際化対応している。