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

padding-rightプロパティは、要素の右側の内側の余白（パディング）の幅を保持するプロパティです。このプロパティは、CSSのボックスモデルにおいて、要素のコンテンツ領域と右側の境界線（ボーダー）との間に設定されるスペースを制御します。このスペースは、要素の背景色や背景画像が適用される領域に含まれるため、デザインの見た目に直接影響を与えます。

設定できる値としては、以下の種類があります。一つ目は、10pxや1.5emのような絶対的または相対的な長さを示す単位です。これにより、指定したピクセル数やフォントサイズに対する比率で余白を設定できます。二つ目は、5%のようなパーセンテージ値で、これは親要素の幅に対する割合として計算されます。その他に、initialを指定することでプロパティの初期値である0に戻したり、inheritを指定することで親要素のpadding-rightプロパティの値を継承したりすることも可能です。

このプロパティは、ブロックレベル要素やインラインブロック要素など、幅を持つことができる要素に適用されます。padding-rightを使用することで、要素の右端に適切な余白を作成し、コンテンツの可読性を向上させたり、要素間のレイアウト調整を行ったりすることができます。例えば、複数の要素が横に並んだ際に、隣接する右側の要素との間に意図した間隔を設ける際に役立ちます。

padding-rightは、padding-top, padding-bottom, padding-leftと並んで、ショートハンドプロパティであるpaddingの一部を構成します。paddingプロパティを使えば四方すべてのパディングを一度に設定できますが、padding-rightを個別に使うことで、右側のパディングのみを柔軟に調整することが可能です。

Copy
1.element-class {
2  padding-right: 20px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません