margin-bottomプロパティ《ボックス外側下の余白を指定》-CSS-

margin-bottomについて

margin-bottomはコンテンツボックス外側下の余白の大きさを指定し、文章を読みやすくしたり、見栄えを整えます。

本記事ではmargin-bottomの基本的な動作と複数ボックスでの余白の適用について紹介します。

マージン ボトム

margin-bottom

コンテンツ(要素)外側下の余白を指定する

コンテンツボックス外側下の余白の大きさを指定し、文章を読みやすくしたり、見栄えを整えるのにmargin-bottomプロパティを使用します。

margin-bottomの記述

セレクタは対象とする要素、クラス名、id名が指定できます。

カテゴリ ボックス
適用できる要素 すべての要素
継承 なし
指定できる 長さのサイズ値、パーセント値、auto
負の値(-10pxなど)の指定も可能です
初期値 0

margin-bottomはボックス外側下の余白を指定する時に使用しますが、以下のように指定することでmarginでも下側の余白を指定できます。

margin-bottom: 10px; margin: 0 0 10px 0;

ボックスの余白に影響するプロパティ

ボックスの余白に影響するプロパティはmargin-bottomを含むmargin類のほかにborder、paddingがあります。

ボックスに影響する余白の関係性は下記図のように適用され、margin-bottomはコンテンツボックス外側(border外側)下の余白を決定します。

margin-bottomプロパティで指定可能な範囲

margin-bottom値別サンプル

「影響範囲を表示」では、margin-bottomの影響範囲を見やすく表示するために背景画像(10pxの青、グレーの四角)画像を交互に表示しています。
margin-bottom部分に画像を指定することはできません。本記事ではmargin-bottom部分を見やすくするため入れ子にし親要素に背景画像を指定しています。

サンプルのコンテンツボックスはwidth:300px;、height:50px、border:5pxで指定しています。

margin-bottomの値が長さのサイズ値

サンプル

【影響範囲を表示】

コンテンツボックス

【実際の表示】

コンテンツボックス

【HTML】

<div>
コンテンツボックス
</div>

【CSS】

div {
  margin-bottom: 10px;
  border: #FF7BAC solid 5px;
}

※「影響範囲を表示」ではmargin-bottomの影響範囲を見やすくするため背景画像(10pxの四角)を親要素に指定しています。コンテンツボックスはwidth:300px;、height:50px、border:5px;で指定しています。

margin-bottomの値がauto

値にauto(自動計算)を指定するとボックスを親要素に対して中央に表示することが可能です。しかし、autoは横には適用されますが、上下には適用されないのでmargin-bottomでautoを指定した場合は0pxと同じ動作になります。

「影響範囲を表示」ではmargin-bottomの影響範囲を見やすくするため背景画像(10pxの四角)を指定していますが、上下のauto指定は0pxとなり下側に四角は表示されません。

サンプル

【影響範囲を表示】

コンテンツボックス

【実際の表示】

コンテンツボックス

【HTML】

<div>
コンテンツボックス
</div>

【CSS】

div {
  margin-bottom: auto;
  border: #FF7BAC solid 5px;
}

※「影響範囲を表示」ではmargin-bottomの影響範囲を見やすくするため背景画像(10pxの四角)を親要素に指定しています。コンテンツボックスはwidth:300px;、height:50px、border:5px;で指定しています。

margin類の動作を分かりづらくしている要因

margin類の利用で迷う原因が「相殺」という動作が発生するということです。

「相殺」は、基本的にmargin同士が重なった場合に発生するのですが、分かりづらくしているのが特定のケースの時には発生しないということです。

また、相殺は上下ボックス、親子ボックスでは発生しますが、左右ボックスでは発生しません。

相殺とは、margin-bottom:10pxで指定した上ボックスとmargin-top:50px;の下ボックスがある場合、ボックス間は60pxになるはずですが、下記図のように少ない値(10px)は打ち消されるということです。

margin上下の相殺関係

【上下ボックスで相殺が発生しないケース】

  • 隣接している値が「正」と「負」混在で指定されている

相殺は上下のボックス間の他に親子ボックス間でも発生します。親子ボックスでも基本的に重なった場合に相殺が発生します。

margin親子の相殺関係

【親子ボックスで相殺が発生しないケース】

  • 親ボックスの重なる側にborderが指定されている
  • 親ボックスの重なる側にpaddingが指定されている
  • 親ボックスにoverflow:hidden;またはscrollが指定されている
    (auto、visible【初期値】が指定されている場合は相殺が発生)
  • 親ボックスにposition:absoluteまたはfixedが指定されている
    (relative、static【初期値】が指定されている場合は相殺が発生)
  • 親、子ボックスどちらかにfloatを指定している
  • 親ボックスにheight:auto;以外が指定されている
    (margin下側の余白のみ【margin-bottom】)

marginとfloatが関係すると

よく相殺と一緒で間違いやすいのがmarginとfloatが関係した場合です。

floatを隣接した兄弟ボックス(上下、左右)片方のみに指定した場合、他方のボックスのmarginは親ボックスとの親子関係になります。

これは、floatを指定したボックスは浮動ボックスになるのが理由です。floatに関して詳しくは別記事でご紹介します。

floatが指定されると、margin:auto;の値は0になります。

floatとmarginの相殺関係

上記図のように、兄ボックスにmarginとfloatを指定した場合、弟ボックスの表示で予想と違うことが多くあります。

  • 親ボックス:図、外周の黒い枠線
  • 兄ボックス:オレンジ枠線、影響範囲:塗りつぶし部分(幅140px、高さ90px)
  • 各弟ボックス:重ならない指定時(赤実線)、青い値で指定時(青点線:表示開始位置、黒実線:自動調整されたコンテンツボックスの表示位置)

兄ボックスにfloatを指定しているので弟ボックスは親ボックスの左上を起点としたmarginになります。そのため、指定したmargin値によっては浮動ボックス状態の兄ボックスと弟ボックスの重なりが発生し、重なった場合の表示が迷う原因になります。

各弟ボックスの赤の指定では問題なく表示されますが、青の場合は兄ボックスに重なってしまい自動調整が入り兄ボックスをさけて表示されます。値通りでは青い点線位置ですが、重なった部分にpaddingのような動作が自動的に加味され、コンテンツボックスは黒枠の位置に表示されます。

弟ボックスA:青で指定したmarginの位置は兄ボックスの下に入っています。そのため、上側の20pxはそのままで左側の100pxに兄ボックスの影響範囲幅との差分40pxをpadding-leftと同じ性質をもった架空値が自動的に加味されて表示されます。重なりが解消された場合は架空値は反映されません。

弟ボックスB:弟ボックスA同様に兄ボックスの下に入ってしまいますので、上側の80pxはそのままで左側の部分が調整されて表示されます。

他のプロパティを追加指定することにより上記以外の表示になることもありますのでfloat使用時には注意してください。

複数ボックスがからむ時のmargin-bottomの適用には注意が必要

本サンプルではmargin-bottomの影響範囲を見やすくするため親要素に背景画像(10pxの四角)を指定しています。

上下で隣接するボックスのmargin-bottom、margin-topは値の大きい方が適用される

レイアウトなどの調整でmargin-bottomを使用する時、想像していた余白と違う場合があります。それは、margin-bottomの特徴として隣接する上下のボックスの隣り合うmarginは値の大きい方が適用されるからです。

値の大きい方を適用することを「相殺」といいます。「相殺」は上下では発生しますが、左右では発生しません。

下記サンプルでは上ボックスのmargin-bottom:50px;、下ボックスのmargin-top:10pxの場合、50px + 10pxで60pxになるように思いますが、実際は隣り合うmargin値の大きい方が適用され50pxの余白になります。
ネガティブマージン(-10pxなど)を片方に指定している場合(正負が混在時)は足した値が適用されます。

サンプル

【表示例】

コンテンツボックス1
コンテンツボックス2

【HTML】

<div class="example1">
コンテンツボックス1
</div>
<div class="example2">
コンテンツボックス2
</div>

【CSS】

.example1 {
  margin-bottom: 50px;
  height: 50px;
  background: #FFFFFF;
}
.example2 { 
  margin-top: 10px;
  height: 50px;
  background: #FFFFFF;
}

親子ボックスのmargin-bottom値は大きい方が適用される

レイアウトなどでボックス(要素)を入れ子にする場合、親ボックス、子ボックス両方にmargin-bottomを指定している時、重なり合う箇所のmargin-bottom値は大きい方が適用されます。

親ボックスのmargin-bottom:10px;、子ボックスのmargin-bottom:50pxの場合、10px + 50pxで60pxになるように思いますが、実際は重なり合う箇所のmargin-bottom値の大きい方が適用され50pxの余白になります。

ただし、親要素にoverflow:hidden;やborderなどを指定している時は重なり合うmargin-bottom値を足した値になります。

margin-bottomのみですが親ボックスのborder-bottom下辺と親ボックスのborder-bottmの下辺が一致しなくなった場合は、親ボックスのmargin-bottomが適用されます。
つまり、親ボックスにheightのauto以外を指定した場合に相殺は発生しません。

サンプル

影響を見やすくする為にfont-sizeおよびline-heigtは10pxにしてありますので、【表示例】のテキストは小さく表示されます。

【表示例】

コンテンツボックス1

コンテンツボックス2

【HTML】

<div class="example1">
コンテンツボックス1
<div class="example2">
コンテンツボックス2
</div>
</div>

【CSS】

.example1 {
  margin-bottom: 10px;
  background: #FFFFFF;
  font-size: 10px;
}
.example2 { 
  margin-bottom: 50px;
  background: #FF7BAC;
  font-size: 10px;
}

marginプロパティ関連記事