概要
padding-inlineプロパティは、CSSで要素のインライン方向（横方向）の内側余白を一括で指定するためのプロパティです。このプロパティを使用することで、左右のパディングを一度に設定でき、効率的に余白を調整することが可能になります。文章の書字方向に依存せず、左右の余白を統一的に扱えるため、padding-leftやpadding-rightの代替として便利です。
構文
padding-inline: <length> | <percentage> | <left-and-right>;
パラメータ
<length>
内側余白の幅を長さの単位（px, em, remなど）で指定します。例えば、10pxのように指定します。<percentage>
要素のサイズに対する割合で余白を指定します。例えば、5%と指定すると、要素の幅の5%が左右の余白として追加されます。<left-and-right>
2つの値を指定して、左側と右側の余白をそれぞれ個別に設定できます。例えば、20px 10pxとすると、左側に20px、右側に10pxの余白が設定されます。
戻り値
padding-inlineは、指定した値に従って、インライン方向（横方向）の内側余白を設定します。このプロパティを使うことで、要素の左右のパディングが簡単に調整でき、レイアウトの統一性が向上します。
説明
padding-inlineは、文書の書字方向（例えば、左から右、右から左など）に関係なく、インライン方向の内側余白を一括で設定できるプロパティです。これにより、文章の方向に影響されることなく、左右の余白を統一的に設定することができます。特に、国際化対応のウェブサイトや、異なる書字方向を扱うデザインで便利です。
主な特徴
- 左右のパディングを一括で設定でき、コーディングがシンプルになります。
- 文書の書字方向に関係なく、一定のパディングを保持できるため、デザインの一貫性が保てます。
padding-inline-startとpadding-inline-endで個別に設定するよりも簡潔に記述できます。
使用例
基本的な使用例
以下の例では、padding-inlineを使って左右に20pxの内側余白を設定しています。
.box {
width: 300px;
height: 150px;
padding-inline: 20px; /* 左右に20pxのパディングを設定 */
background-color: lightblue;
}
この設定により、要素の左右に20pxの内側余白が適用されます。
左右で異なる余白を設定する例
2つの値を使用して、左側と右側の余白をそれぞれ設定できます。
.box {
width: 300px;
height: 150px;
padding-inline: 10px 30px; /* 左に10px、右に30pxのパディングを設定 */
background-color: lightgreen;
}
この設定では、左に10px、右に30pxの異なる内側余白が設定されます。
パーセンテージを使用して余白を指定する例
パーセンテージを使うことで、要素の幅に対する割合で余白を設定できます。
.box {
width: 400px;
height: 200px;
padding-inline: 5%; /* 要素の幅の5%分のパディングを左右に設定 */
background-color: lightyellow;
}
この設定により、要素の幅の5%分が左右のパディングとして適用されます。
注意点
padding-inlineは、左側と右側のパディングを一括で設定するプロパティです。必要に応じて、padding-inline-start（左側）とpadding-inline-end（右側）を個別に設定することもできます。- パーセンテージで指定する場合、要素の幅が変動するとパディングも変わるため、レイアウトの確認が必要です。
- このプロパティはブラウザのサポート状況に注意が必要です。最新のブラウザでは一般的にサポートされていますが、古いバージョンではサポートされていない可能性があります。
まとめ
padding-inlineプロパティは、要素のインライン方向の内側余白を効率よく設定するための便利なツールです。特に異なる書字方向に対応するデザインや、左右の余白を統一的に管理したい場合に最適です。他のパディング関連プロパティと組み合わせて、より柔軟で一貫性のあるレイアウトを実現しましょう。