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

marginについて

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

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

マージン

margin

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

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

marginの記述

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

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

marginの値は1個から4個まで指定可能です。複数指定する場合は、各値の間に半角スペースを入れて指定します。

各値ごとに適用される場所は下記表になります。

margin :10px;
(4辺の余白)
4つの辺に10pxの余白
margin:10px 20px;
(上下、左右の余白)
上下に10px、左右に20pxの余白
margin:10px 20px 30px;
(上、左右、下の余白)
上に10px、左右に20px、下に30pxの余白
margin:10px 20px 30px 40px;
(上、右、下、左の余白)
上に10px、右に20px、下に30px、左に40pxの余白

marginは上(margin-top)、右(margin-right)、下(margin-bottom)、左(margin-left)で個別に指定することも可能です。

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

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

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

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

margin値別サンプル

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

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

marginの値が1個

サンプル(4辺:10pxのmarginを指定)

【影響範囲を表示】

コンテンツボックス

【実際の表示】

コンテンツボックス

【HTML】

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

【CSS】

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

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

marginの値が2個

サンプル(上下:10px、左右:20pxのmarginを指定)

【影響範囲を表示】

コンテンツボックス

【実際の表示】

コンテンツボックス

【HTML】

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

【CSS】

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

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

marginの値が3個

サンプル(上:10px、左右:20px、下:30pxのmarginを指定)

【影響範囲を表示】

コンテンツボックス

【実際の表示】

コンテンツボックス

【HTML】

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

【CSS】

div {
  margin: 10px 20px 30px;
  border: #FF7BAC solid 5px;
}

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

marginの値が4個

サンプル(上:10px、右:20px、下:30px、左:40pxのmarginを指定)

【影響範囲を表示】

コンテンツボックス

【実際の表示】

コンテンツボックス

【HTML】

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

【CSS】

div {
  margin: 10px 20px 30px 40px;
  border: #FF7BAC solid 5px;
}

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

marginは上下左右を個別に指定することも可能です。下記表が個別箇所とmarginでの記述の仕方になります。

上側の余白を指定
margin-top: 10px;
margin: 10px 0 0 0;
右側の余白を指定
margin-right: 10px;
margin: 0 10px 0 0;
下側の余白を指定
margin-bottom: 10px;
margin: 0 0 10px 0;
左側の余白を指定
margin-left: 10px;
margin: 0 0 0 10px;

marginの値がauto

値にauto(自動計算)を指定するとボックスを中央に表示することが可能です。autoは横には適用されますが、縦には適用されないので注意してください。

autoを適用する場合、適用するボックスのwidthを指定していないと中央に表示されません。

サンプルでは縦に適用されないことも確認できるように、値はauto 1個を指定しています。
実際に使用する場合は勘違いを防ぐためにauto 1個でなく上下のmarginも指定することをおススメします。

サンプル(autoを指定)

【影響範囲を表示】

コンテンツボックス

【実際の表示】

コンテンツボックス

【HTML】

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

【CSS】

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

本サンプルではmargin:auto;と記述してありますが、勘違いを防ぐためにmargin: 0 auto;または0 auto 0;と記述することをおススメします。

※「影響範囲を表示」ではmarginの影響範囲を見やすくするため背景画像(10pxの四角)とwidth:570px、height:200px;を親要素に指定しています。コンテンツボックスは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の適用には注意が必要

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

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

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

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

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

左右で隣接する場合は両方のmargin値を足した値になり、左ボックスのmargin-right:10px、右ボックスのmargin-left:50pxの時、ボックス間の余白は60pxになります。

サンプル(上下ボックスにmarginの適用)

【表示例】

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

【HTML】

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

【CSS】

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

サンプル(左右ボックスにmarginの適用)

【表示例】

コンテンツボックス3
コンテンツボックス4

【HTML】

<div class="example3">
コンテンツボックス3
</div>
<div class="example4">
コンテンツボックス4
</div>

【CSS】

.example3 {
  margin: 10px 10px 10px 10px;
  width: 200px;
  height: 50px;
  background: #FFFFFF;
  float: left;
}
.example4 { 
  margin: 10px 10px 10px 50px;
  width: 200px;
  height: 50px;
  background: #FFFFFF;
  float: left;
}

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

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

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

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

左右のmarginに関しては足した値が適用されます。

サンプル(親子ボックスにmarginの適用)

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

【表示例】

コンテンツボックス1

コンテンツボックス2

【HTML】

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

【CSS】

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

marginプロパティ関連記事