

そんな疑問にお答えします。
marginプロパティにはmarginの相殺というルールがあります。
今回はこの点を理解しましょう。
目次
marginの相殺とは
marginの相殺とは
「2つのブロックレベル要素それぞれに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の相殺は起こりません。
ネガティブマージンの場合
ネガティブマージンって何?という方はこちらをご覧ください。
ネガティブマージンを指定すると隣接する要素は重なります。
では以下の場合はどうなるでしょうか?
<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がない場合とまったく同じになります。
補足
marginの相殺に関連して補足しておきます。
- paddingでは相殺は起こらない
- paddingとmargin間でも相殺は起こらない
相殺はmarginの場合だけであってpaddingでは関係ありません。
まとめ
思うようなレイアウトにならないときはmarginの相殺が起こっているかもしれません。
そうならないためには「margin-top」もしくは「margin-bottom」のどちらか一方のみでmarginを調整するように心がけましょう。
そうすればmarginの相殺に悩まされずに済みます。
以上です。
投稿者 トシ
コメントを残す