padding-block を今さら調べてみた

概要

先日、Figmaから AI を使ってコード生成の実験をしていたところ、padding-block という見慣れないCSSプロパティが出てきて「何これ？」となりました。

恥ずかしながら改めて調べてみたところ、主要ブラウザで使えるようになったのは2021年と結構前で、「全然追いつけてなかったな〜」としみじみ感じたので、備忘録として記事にまとめます。

どういうプロパティ？

一言でいうと、横書きを縦書きにしたときでも、paddingの「意味」が維持されるプロパティです。

普段よく使う padding-top や padding-bottom は「画面の上・下」という物理的な方向を指定しています。一方で padding-block は「文章が流れていく方向（ブロック方向）」という論理的な方向を指定します。

• 横書き（通常の日本語・英語など）の場合 → padding-block は padding-top + padding-bottom と同じ

• 縦書き（writing-mode: vertical-rl など）の場合 → padding-block は padding-left + padding-right と同じ

つまり、writing-mode が切り替わっても、CSSを書き換えることなく「テキストの流れる方向に対する余白」が自動的に正しい位置に付け替わる、というわけです。

実際に動きを見てみるとわかりやすいので、下記のCodePenを見てみてください。

横書きのときは上下に余白が付いていたのに、縦書きに切り替えると左右に余白が移動しているのが確認できると思います。padding-top/bottom で同じことをやろうとすると、writing-mode の変化に応じて自分でプロパティを出し分ける必要がありますが、padding-block を使えばそこを意識しなくてよくなります。

対になるプロパティ padding-inline

padding-block が「ブロック方向（横書きなら上下）」なら、「インライン方向（横書きなら左右）」を担当するのが padding-inline です。

.card {
  padding-block: 24px;  /* 横書きなら padding-top + padding-bottom */
  padding-inline: 16px; /* 横書きなら padding-left + padding-right */
}

まとめ

• padding-block は書字方向に応じて余白の向きが自動で切り替わる論理プロパティ

• ブラウザ対応自体は2021年からと意外と歴史がある

• 多言語対応やコンポーネントの再利用性を意識するなら、padding-inline とセットで覚えておいて損はない

AIがサラッと最新のCSSを書いてくることが増えてきた今、たまにこうして立ち止まって「これ何だっけ？」を調べ直す機会は大事だな、と改めて感じた出来事でした。