padding-inlineとpadding-blockとは？

CSSで余白を指定するとき、多くの人が最初に覚えるのは padding-top や padding-left、そして padding: 20px; などの書き方だと思います。

しかし最近では、

padding-inline

padding-block

という書き方を使う場面が増えてきています。

「普通のpaddingと何が違うの？」

「結局どっちを使えばいいの？」

と感じる人も多いと思います。

この記事では、padding-inline と padding-block の意味や使い方、従来のpaddingとの違いを初心者向けにわかりやすく解説します。

そもそもpaddingとは？

paddingは、要素の「内側の余白」を指定するCSSです。

例えば、

padding: 20px;

と書くと、上下左右すべてに20pxの余白が入ります。

従来のpadding指定

これまでは方向ごとに、

padding-top

padding-right

padding-bottom

padding-left

を使っていました。

例えば、

padding-left: 20px;

padding-right: 20px;

なら左右に余白が入ります。

padding-inlineとは？

padding-inline は、「横方向」のpaddingをまとめて指定できるCSSです。

例えば、

padding-inline: 20px;

と書くと、

padding-left: 20px;

padding-right: 20px;

と同じ意味になります。

つまり、

左右のpadding

横方向の余白

をまとめて指定できるということです。

padding-blockとは？

一方、padding-block は「縦方向」のpaddingを指定します。

padding-block: 30px;

これは、

padding-top: 30px;

padding-bottom: 30px;

と同じ意味です。

つまり、

上下のpadding

縦方向の余白

をまとめて指定できます。

まとめるとこうなる

CSS

意味

padding-inline

左右の余白

padding-block

上下の余白

実際の使用例

例えばよくあるコンテナなら、

.container{

  padding-inline: 20px;

  padding-block: 60px;

}

こう書けます。

意味としては、

左右に20px

上下に60px

の余白です。

かなり読みやすくなります。

なぜ最近よく使われるの？

理由は主に2つあります。

理由1：コードがわかりやすい

例えば、

padding-left: 20px;

padding-right: 20px;

より、

padding-inline: 20px;

の方が短くてわかりやすいです。

特に大規模サイトでは、コードの読みやすさがかなり重要になります。

理由2：書字方向に対応しやすい

実は inline と block は、「左右」「上下」を直接意味しているわけではありません。

正確には、

inline → 文字が流れる方向

block → 文章が積み重なる方向

を意味しています。

日本語や英語では通常、

inline = 横方向

block = 縦方向

ですが、縦書きレイアウトでは変わる場合があります。

つまり、国際対応や特殊レイアウトでも柔軟に使える設計になっています。

paddingと何が違う？

例えば、

padding: 20px 10px;

でも上下左右を指定できます。

ただし、

padding: 上下 左右;

という順番を覚える必要があります。

一方、

padding-inline

padding-block

は、

「どっち方向の余白なのか」

が名前だけでわかるのがメリットです。

最近のCSSではかなり使われている

最近のCSSでは、

margin-inline

margin-block

inset-inline

inline-size

など、「論理プロパティ」と呼ばれる書き方が増えています。

特にモダンなCSSを書く人ほど、この書き方を使う傾向があります。

どっちを使えばいい？

結論としては、

小規模なら従来のpaddingでもOK

保守性を上げたいならpadding-inline/blockがおすすめ

です。

特に、

コンポーネント設計

SCSS

BEM

モダンCSS

を使うなら、かなり相性が良いです。

まとめ

padding-inline と padding-block は、余白を方向ごとにわかりやすく指定できるCSSです。

padding-inline → 左右

padding-block → 上下

を意味します。

最近のCSSでは非常によく使われる書き方なので、今のうちに慣れておくと、コードが読みやすく整理しやすくなります。

特にチーム開発や長期運用では、「何方向の余白かがすぐ分かる」というのはかなり大きなメリットです。