Webデザインにおいて、要素間の間隔や余白は非常に重要な要素の一つです。CSSのmarginプロパティを使用することで、要素の余白を調整することができます。marginプロパティは、上下左右の余白を個別に指定することができますが、本記事では、その中でもmargin-bottomについて解説し、その使い方や実際の効果について紹介します。
①margin-bottomとは
margin-bottomは、要素の下側の余白を指定するプロパティです。このプロパティを使用することで、要素の下側に余白を設けることができます。margin-bottomは、ピクセル、パーセント、emなどの単位で指定することができます。
②使い方
margin-bottomは、CSSで要素に適用することができます。以下は、その使い方の例です。
例①
p {
margin-bottom: 20px;
}
この例では、p要素の下側に20ピクセルの余白を設定しています。これにより、p要素の下にスペースが生じます。
例②
h1 {
margin-bottom: 10%;
}
この例では、h1要素の下側に現在のフォントサイズの10%の余白を設定しています。%は、現在のフォントサイズに対する相対値を示します。
例③
img {
margin-bottom: 2em;
}
この例では、img要素の下側に現在のフォントサイズの2倍のサイズの余白を設定しています。emは、現在のフォントサイズに対する相対値を示します。
③実際試したところ結果
margin-bottomを変更することで、要素の下側に余白を設定することができます。これにより、要素間の間隔や余白を調整することができます。また、marginプロパティは、上下左右の余白を個別に指定することができるため、要素の位置やレイアウトの調整にも利用することができます。
ただし、marginプロパティは、要素の外側の余白を調整するため、周囲の要素にも影響を与えることがあります。そのため、適切な余白を設定することが重要です。
④終わり
以上が、CSSのmargin-bottomについての解説です。
実際結果：https://eigo-bunpou.com/namely/