2022/3/6

【CSS】marginの相殺を理解しよう

CSS

marginの相殺って何のこと？

そんな疑問にお答えします。

marginプロパティにはmarginの相殺というルールがあります。

今回はこの点を理解しましょう。

1 marginの相殺とは
2 marginの相殺が起こる条件
3 marginの相殺が起こらないパターン
4 ネガティブマージンの場合
5 補足
6 まとめ

marginの相殺とは

「２つのブロックレベル要素それぞれにmarginが設定されているとき、それらが垂直方向に重なると小さい方のmarginが打ち消される現象」

をいいます。

marginの相殺図

marginの相殺が起こる条件

marginの相殺が起こるには一定の条件があります。

💡ポイント！　

ブロックレベルの要素であること
上下に隣接していること
上下のmargin同士が直接隣り合っていること

逆にいえば次の場合はmarginは相殺されません。

marginの相殺が起こらないパターン

左右で隣接する要素のmargin

左右のmargin

左右で隣接する要素のmarginは相殺されずに合算されます。

display: inline-block;を指定

display: inline-block;を指定した場合はmarginの相殺は起こりません。

たとえば下記のコードの場合、sample2にdisplay: inline-block;が指定されているのでmarginの相殺は起こりません。

よって両者の間には150pxの余白ができることになります。

sample2にdisplay: inline-block;が指定されていなければ、marginの相殺が起こりますので余白は100pxとなります。

<p class="sample1">サンプル1</p>
<p class="sample2">サンプル2</p>

.sample1 {
  margin-bottom: 100px;
}

.sample2 {
  margin-top: 50px;
  display: inline-block;
}

Flexbox

display: flex;を要素に指定するとFlexboxとなりますが、その中の兄弟要素同士ではmarginの相殺は起こりません。

float

floatが指定されている兄弟要素同士ではmarginの相殺は起こりません。

ネガティブマージンの場合

ネガティブマージンって何？という方はこちらをご覧ください。

【CSS】ネガティブマージンの使い方【初心者向け】

ネガティブマージンを指定すると隣接する要素は重なります。

では以下の場合はどうなるでしょうか？

<div class="box1"></div>
<div class="box2"></div>

.box1 {
  width: 400px;
  height: 200px;
  background: #00CC99;
  margin-bottom: -100px; /*ネガティブマージン*/
}

.box2 {
  width: 400px;
  height: 200px;
  background: pink;
  margin-top: -50px; /*ネガティブマージン*/
}

この場合は大きい方のネガティブマージン（-100px）が適用され、小さい方のネガティブマージン(-50px)は打ち消されます。

ここは正のmargin（ポジティブマージン）のときのルールと似ています。

つまり、大きい方が優先されるということです。

次に片方がポジティブマージン、もう片方がネガティブマージンのパターンを見てみましょう。

この場合、marginは足し算されます。

例として以下を見てください。

<div class="box1"></div>
<div class="box2"></div>

.box1 {
  width: 400px;
  height: 200px;
  background: #00CC99;
  margin-bottom: 100px; /*ポジティブマージン*/
}

.box2 {
  width: 400px;
  height: 200px;
  background: pink;
  margin-top: -50px; /*ネガティブマージン*/
}

このような場合は、100px + (-50px) で50pxのmarginが作られます。

ですのでもしbox1が「margin-bottom: 100px;」、box2が「margin-top: -100px;」であるならば、これは両方にmarginがない場合とまったく同じになります。

ポジティブマージンとネガティブマージンの参考図