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

padding-inline-startプロパティは、要素の論理的な開始方向のパディング（内側の余白）を保持するプロパティです。このプロパティは、CSSの論理プロパティの一つであり、テキストの書き込み方向や要素の方向に応じてパディングの適用位置が自動的に決定される点が特徴です。従来のpadding-leftやpadding-rightといった物理的な方向を指定するプロパティとは異なり、padding-inline-startは常に、現在の書き込みモードにおけるブロックの「開始」側に対応します。

例えば、英語のように左から右へ書く言語（direction: ltr）の場合、padding-inline-startはpadding-leftと同じ効果を持ち、要素の左側に余白が適用されます。一方、アラビア語やヘブライ語のように右から左へ書く言語（direction: rtl）の場合、padding-inline-startはpadding-rightと同じ効果を持ち、要素の右側に余白が適用されます。また、縦書きモード（writing-modeプロパティで指定）では、上部または下部に対応する場合があります。

設定できる値としては、pxやemなどの具体的な長さの単位、または親要素の幅に対する割合を示す%などがあります。これらの値を指定することで、コンテンツと要素の境界線との間に柔軟に余白を設定できます。この論理的なアプローチは、多言語対応のウェブサイトや国際化されたユーザーインターフェースを開発する際に特に有用です。言語の方向性が変わってもCSSコードを修正することなく、適切なパディングが自動的に適用されるため、保守性と柔軟性が向上します。

Copy
1padding-inline-start: 10px;

引数なし

引数はありません

戻り値なし

戻り値はありません