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プロパティは、要素の下マージンに対してマージン幅の指定を行います。
書き方は、
|
1 |
margin-bottom:10px; |
のように記述し、マージンの幅を決めるのに数値と単位を入れます。
margin-bottomプロパティの値で使う単位について
margin-bottomプロパティで使われる単位について、説明をしていきます。
px（ピクセル）
ピクセルは、画像の絵や文字を形成するための小さな四角い点を示しています。1pxで設定した場合、小さな四角い点一つ分のサイズになります。
em（エム）
親要素の文字のサイズによって、サイズに変化を与える単位です。文字の大きさを指定しなかった場合ブラウザのデフォルトでは、16pxになります。
エムのサイズは、フォントサイズ✖️数値になるので、
|
1 |
margin-bottom:1.2em; |
上記のように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つのマージンで大きい方のmarigin-topプロパティ30pxのみが適用されます。２つの要素の間のマージンは、40pxではなく30pxになっているという事ですね。
他にもブロック要素など、要素の間に隣接するマージンは相殺されるので、margin-bottomプロパティに隣接するマージンがあるとき注意してください。
まとめ
いかがでしたか？
今回、margin-bottomプロパティの使い方、注意するポイントついてご紹介しました。
margin-bottomプロパティは、重要度が高いため、基礎をしっかりと身に着ける必要があります。使い慣れるためには、実際にコーディングをすることです。
この記事を参考に簡単な設定から試してみてください。
参考文献：MDN web docs｜margin-bottom： CSS のプロパティで、要素の下側のマージン領域を設定
