margin-bottomプロパティとは?使い方と注意するポイントを解説!

CSSでよく使われるmargin-bottomというプロパティがあります。margin-bottomは、CSSの学習で初めに学ぶことになるプロパティの一つです。

設定をすると、要素の下マージンの長さを決められますが、

下マージンの長さとは何?

とmargin-bottomプロパティを知らない方は疑問を抱かれるでしょう。使い方を知らずに設定するとエラーが起きる恐れがあります。

そこで今回は、margin-bottomプロパティの

・基本的な使い方
・注意するべきポイント

について解説していきます。

CSSを学び始めた方にとってためになる情報なので、ぜひ目を通してみてください。

margin-bottomプロパティとは

margin-bottomプロパティの読み方

margin-bottomは、「マージン-ボトム」と読みます。

マージンは、余白や差という意味があり、長さを調整するために使われるプロパティです。

margin-bottomプロパティの説明

margin-bottomプロパティは、

下マージンを指定して長さを調整

するに使われます。

margin-bottomプロパティの数値によって、下マージンの長さを決めます。サイトのサイズバランスを調整する上で重要なプロパティです。

マージンの長さにズレがあるとサイトを利用している方に違和感を与えたり、情報を見づらいと感じさせてしまいますので、綺麗に整えることが必要です。

margin-bottomプロパティで利用できる値

margin-bottomプロパティでは以下の値を使うことができます。

説明
length 固定したいときに使われる値です。マージンの寸法を固定する値の単位はpxやemなどがあります。
percentage percentageは、要素のサイズに応じて、変動させられます。変動させるには%の単位を入れます。
auto サイズなどによって自動的に計算し、マージンを指定する値です。margin-bottomプロパティでは、autoを入れると値は基本0として扱われます。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox  完全対応
Internet Explorer  完全対応
Opera  完全対応
Safari  完全対応
スマートフォン用ブラウザ 対応状況
Android webview 完全対応
Android版Chrome 完全対応
Android版Firefox  完全対応
Android 版 Opera  完全対応
iOS版Safari  完全対応
Samsung Internet  完全対応

margin-bottomプロパティの基本的な使い方

margin-bottomプロパティの使い方

margin-bottomプロパティを設定したコードを実際に見ていきましょう。

See the Pen
margin-bottomプロパティ
by 吉井大輝 (@DaiW)
on CodePen.

margin-bottomプロパティは、要素の下マージンに対してマージン幅の指定を行います。

書き方は、

のように記述し、マージンの幅を決めるのに数値と単位を入れます。

 

margin-bottomプロパティの値で使う単位について

margin-bottomプロパティで使われる単位について、説明をしていきます。

px(ピクセル)

ピクセルは、画像の絵や文字を形成するための小さな四角い点を示しています。1pxで設定した場合、小さな四角い点一つ分のサイズになります。

em(エム)

親要素の文字のサイズによって、サイズに変化を与える単位です。文字の大きさを指定しなかった場合ブラウザのデフォルトでは、16pxになります。

エムのサイズは、フォントサイズ✖️数値になるので、

上記のように1.2の数値を入れた場合、16px✖️1.2になるので19.2pxのサイズとなります。しかし、親の要素のフォントサイズによって変化するの単位なので、扱いが難しいです。

rem(レム)

レムは、HTMLのフォントサイズ、またはブラウザのデフォルトに数値を掛けた値になります。エム単位とは違い、他の親要素のフォントサイズに変化があっても影響しません。

CSS初心者の方には、エムよりもレムが扱いやすいでしょう。

margin-bottomプロパティを使う上で注意するポイント

margin-bottomプロパティでネガティブマージンの設定

ネガティブマージンは、マイナスの数値を設定することです。

実際にmargin-botttomプロパティにネガティブマージンを設定をすると

See the Pen
ネガティブマージン
by 吉井大輝 (@DaiW)
on CodePen.

上記のように要素が重なります。マージンを学び始めた方にとって難しい技術です。

上手く扱えるようになるためには、まずmargin-botttomプロパティの基礎をしっかりと理解する必要があります。

margin-bottomプロパティとmargin-topプロパティの相殺

マージンを設定していて注意しなければいけないのが相殺です。相殺とはどのようなことかコードを交えながら説明していきます。

See the Pen
margin-bottomプロパティ相殺
by 吉井大輝 (@DaiW)
on CodePen.

上記のマージンを見ていくとmargin-bottomプロパティが10px、marigin-topプロパティ30pxです。

margin-bottomとmarigin-topを足すと40pxになりますが、divのような2つのブロックレベル要素が並んだとき、CSSの機能により相殺が発生するため、実際には合計の40pxがマージン幅となるわけではありません。

2つのマージンが競合した時、数値の大きい方が適用され、小さいほうは相殺されるというルールがあります。

なので、今回の場合2つのマージンで大きい方のmarigin-topプロパティ30pxのみが適用されます。2つの要素の間のマージンは、40pxではなく30pxになっているという事ですね。

他にもブロック要素など、要素の間に隣接するマージンは相殺されるので、margin-bottomプロパティに隣接するマージンがあるとき注意してください。

まとめ

いかがでしたか?
今回、margin-bottomプロパティの使い方、注意するポイントついてご紹介しました。

margin-bottomプロパティは、重要度が高いため、基礎をしっかりと身に着ける必要があります。使い慣れるためには、実際にコーディングをすることです。

この記事を参考に簡単な設定から試してみてください。

参考文献:MDN web docs|margin-bottom: CSS のプロパティで、要素の下側のマージン領域を設定