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

padding-bottomプロパティは、HTML要素の下側のパディング（内側の余白）のサイズを保持するプロパティです。このプロパティを使用することで、要素のコンテンツと、その要素の下部の境界線（ボーダー）との間に設けられるスペースの量を設定できます。

CSSの基本的な概念であるボックスモデルにおいて、すべてのHTML要素はコンテンツ、パディング、ボーダー、マージンという四つの領域で構成されます。padding-bottomプロパティは、このうち「パディング」の層の一部であり、特に要素の下方向の内側スペースを管理する役割を担います。これにより、コンテンツが要素の下端に過度に接近するのを防ぎ、視覚的なゆとりと読みやすさを確保します。

指定できる値には、px（ピクセル）、em（要素のフォントサイズに対する相対値）、rem（ルート要素のフォントサイズに対する相対値）のような具体的な長さの単位があります。また、親要素のコンテンツ領域の幅に対する割合を示す%（パーセンテージ）で指定することも可能です。パーセンテージ値は、親要素の幅を基準に計算されるため、レスポンシブなデザインにおいて柔軟な余白設定に役立ちます。

このプロパティは、Webページのデザインにおいて、要素間の適切な間隔を調整し、全体のバランスを整える上で不可欠です。例えば、段落と次の要素の間に適切な空白を設けたり、画像の下にゆとりを持たせたりすることで、ページの視認性や美しさを向上させることができます。負の値を指定することはできません。

Copy
1selector {
2  padding-bottom: 20px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません