【CSS Modules】padding-block省略形プロパティの使い方

padding-blockプロパティは、CSSにおいて、要素のブロック方向のパディング（内側の余白）の設定値を保持するプロパティです。このプロパティは、論理プロパティの一つであり、padding-block-start と padding-block-end の両方の値をまとめて設定するショートハンドプロパティとしての機能を持っています。

ここでいう「ブロック方向」とは、テキストの書き込みモード（writing-modeプロパティ）によって決定される、コンテンツの主要な流れの方向を指します。例えば、日本語や英語のような横書きの言語（writing-mode: horizontal-tb）の場合、ブロック方向は上から下への垂直方向であるため、padding-blockは要素の上下のパディングを制御します。一方、アラビア語のような縦書きの言語（writing-mode: vertical-lr）の場合、ブロック方向は左から右への水平方向であるため、padding-blockは要素の左右のパディングを制御します。

このプロパティに値を指定する方法は主に二通りです。一つの値を指定した場合（例: padding-block: 10px;）、その値がブロックの開始方向と終了方向の両方に適用されます。二つの値を指定した場合（例: padding-block: 10px 20px;）、最初の値がブロックの開始方向であるpadding-block-startに、二番目の値がブロックの終了方向であるpadding-block-endにそれぞれ適用されます。

padding-blockプロパティを使用することで、テキストの書き込み方向が変わってもレイアウトを自動的に適応させることが可能になり、国際化対応や多言語対応において、より柔軟で保守しやすいスタイルを記述できます。これは、従来の物理的な方向を指定するプロパティ（例: padding-top）では実現が難しい、論理的な設計を可能にする重要な機能です。

Copy
1.element {
2  padding-block: 10px 20px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません