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

padding-inlineプロパティは、要素のインライン方向のパディング（内側の余白）を一度に設定するCSSのショートハンドプロパティです。このプロパティは、padding-inline-startとpadding-inline-endという二つの論理プロパティの値を同時に保持し、要素の書字方向に基づいたパディングを定義します。論理プロパティは、コンテンツの書字方向（例えば、左から右、右から左、上から下など）に応じて、パディングが適用される物理的な位置が自動的に変化する特性を持っています。

具体的には、一般的な横書き（左から右に書く言語）の場合、padding-inline-startはpadding-leftに、padding-inline-endはpadding-rightにそれぞれ対応します。しかし、アラビア語のように右から左に書く言語の場合、padding-inline-startはpadding-rightに、padding-inline-endはpadding-leftに対応するよう自動的に切り替わります。また、日本語の縦書きモードでは、padding-inline-startが上部のパディング、padding-inline-endが下部のパディングとして適用されるといった具合に、書字モードによって物理的なパディングの位置が変わります。

このプロパティを使用することで、固定された物理的な方向（padding-leftなど）に依存せず、常にコンテンツの流れの開始位置と終了位置に合わせた一貫したパディングを簡単に設定できます。これは、多言語対応や国際化が求められるウェブサイトやアプリケーションにおいて、異なる書字方向の環境でもデザインの一貫性を保ち、柔軟なレイアウトを実現するために非常に有用です。値を一つ指定した場合、padding-inline-startとpadding-inline-endの両方に同じ値が適用され、二つの値を指定した場合は、最初の値がpadding-inline-startに、二番目の値がpadding-inline-endにそれぞれ適用されます。

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

引数なし

引数はありません

戻り値なし

戻り値はありません