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

margin-bottomプロパティは、HTML要素の下側の外部余白（マージン）のサイズを保持するプロパティです。このプロパティを使用することで、指定した要素の下端と、その要素に続く他の要素や親要素の境界との間に確保される空間の量を制御できます。

値には、ピクセル（px）、em（em）、rem（rem）といった長さを示す単位や、ビューポートのサイズに対するパーセンテージ（%）を指定できます。また、「auto」というキーワードも指定可能で、これはブラウザが自動的に余白のサイズを決定することを意味しますが、通常、垂直方向のmargin-bottomでautoを指定した場合、その値は0として扱われます。

Webページのデザインにおいて、要素同士が詰まりすぎず、かといって離れすぎないように、適切な間隔を空けて配置することは非常に重要です。margin-bottomプロパティは、この要素間の視覚的な区切りやレイアウトの調整において中心的な役割を果たします。例えば、段落や見出しの後に適切な下マージンを設定することで、次の要素との区別を明確にし、情報の整理と文章の可読性を向上させることができます。

このプロパティは、margin-top、margin-left、margin-rightといった他の方向のマージンプロパティと合わせて、要素の周囲の余白全体を調整するために用いられます。これらの個別のマージンプロパティをまとめて設定できるショートハンドプロパティであるmarginも存在します。

Copy
1margin-bottom: 20px;

引数なし

引数はありません

戻り値なし

戻り値はありません