marginの相殺が起こる3つのケースと例外を紹介！

marginの相殺は、marginの理解をややこしくしている理由の1つです。この記事では、marginの相殺が起こる3つのケースと例外を紹介します。

CSSで余白を作る方法！marginとpaddingについて解説！

marginとpaddingの基礎については、上の記事で解説しています。

marginの相殺とは？

marginの相殺とは、上の画像のように、ある状況下で2つの要素間のmarginが打ち消し合う仕様です。

• 思い通りに余白が入らない
• 意図しない余白ができた

これらのケースはもしかしたら、marginの相殺が原因かもしれません。marginの相殺は複雑ですが、起こるケースや例外を知っておくと良いです。

marginの相殺が起こる3つのケース

• 隣接する兄弟要素間のmargin
• 親要素と子要素に設定する同方向のmargin
• 空の要素に設定する上下のmargin

marginの相殺が起こる、上の3つのケースを紹介します。

隣接する兄弟要素間のmargin

<div class="box">box</div>
<div class="box02">box</div>

.box{
    margin-bottom: 30px;
}
.box02{
    margin-top: 10px;
}

隣接する兄弟要素間のmarginは相殺され、大きい方が採用されます。上の例では30px + 10px = 40pxにはならず、大きい方の30pxだけ余白が空きます。

親要素と子要素に設定する同方向のmargin

親要素と子要素に設定する同方向のmarginも相殺しますが、上方向のmarginか下方向のmarginかで挙動が異なります。

上方向のmargin

<div class="parent">
    <div class="child">box</div>
</div>

.parent{
    margin-top: 10px;
}
.child{
    margin-top: 30px;
}

大きい方が採用されます。

下方向のmargin

<div class="parent">
    <div class="child">box</div>
</div>

.parent{
    margin-bottom: 10px;
}
.child{
    margin-bottom: 30px;
}

親要素がhight: auto;の場合、上方向の時と同じく、大きい方が採用されます。hightの指定がない場合は、デフォルトでautoです。

.parent{
    hight: 200px;
    margin-bottom: 10px;
}
.child{
    margin-bottom: 30px;
}

親要素がhight: auto;以外の場合、親要素のmargin-bottomが採用されます。

空の要素に設定する上下のmargin

<div class="space"></div>

.space{
    margin-top: 30px;
    margin-bottom: 10px;
}

大きい方が採用されます。

空の要素の上下にある要素にmarginが設定されている場合、上の画像のようになります。

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

例外的に、marginの相殺が起こらないケースを紹介します。

display: inline-block;の指定がある

<div class="box">box</div>
<div class="box02">box</div>

.box{
    margin-bottom: 30px;
}
.box02{
    margin-top: 10px;
    display: inline-block;
}

片方、もしくは両方の要素のdisplayにinline-block / inline-flex / inline-grid の指定がある場合はmarginの相殺は起こりません。

displayにinlineが指定されている場合は、そもそもmargin自体入りません。

上の例は、『隣接する兄弟要素間のmargin』ですが、『親要素と子要素に設定する同方向のmargin』と『空の要素に設定する上下のmargin』でも同じように、marginの相殺は起こりません。

親要素にborderやpaddingがある

<div class="parent">
    <div class="child">box</div>
</div>

.parent{
    margin-top: 10px;
    border: 1px solid #333;
}
.child{
    margin-top: 30px;
}

親要素と子要素の同方向にmarginがあっても、親要素にborderやpaddingの設定があると、marginの相殺は起こりません。上の例は上方向ですが、下方向も同じです。

flexアイテムやgridアイテム間

flexアイテムやgridアイテムのアイテム間は上下のmarginでも相殺は起こりません。

ネガティブmargin

<div class="box">box</div>
<div class="box02">box</div>

.box{
    margin-bottom: 30px;
}
.box02{
    margin-top: -10px;
}

ネガティブmarginが設定されている場合、合算された値が余白として入ります。上の例では、30px - 10px = 20pxの余白が入ります。

.box{
    margin-bottom: -30px;
}
.box02{
    margin-top: -10px;
}

このようにどちらにもネガティブmarginが設定されている場合、小さい方が採用されます。上の例では、-30pxです。

floatが指定されている

<div class="box-wrap">
    <div class="box">box</div>
    <div class="box02">box</div>
</div>

.box{
    width: 100%;
    margin-bottom: 30px;
    float: left;
}
.box02{
    width: 100%;
    margin-top: 10px;
    float: left;
}

floatが設定されている場合、marginの相殺は起こりません。

親要素にoverflowが指定されている

<div class="parent">
    <div class="child">box</div>
</div>

.parent{
    overflow: hidden;
    margin-top: 10px;
}
.child{
    margin-top: 30px;
}

親要素にoverflowが指定されている場合、overflowの値によってはmarginの相殺は起こりません。

よく使う値だと、hiddenとscrollが指定されている場合、marginの相殺は起こりません。overflowの初期値はvisibleです。

marginの相殺の回避方法はmarginを正しく使うこと！

• 余白を入れる方向を統一する
• marginとpaddingを正しく使い分ける

これらを意識するだけで、意図しないmarginの相殺が起きることは、ほぼなくなります。テクニックのような回避方法を覚える必要はないと、個人的に思っています。

余白を入れる方向を統一する

余白の方向は、例えば上下であれば必ず上に、左右であれば必ず左に入れる、と決めます。

<li class="menu-item">🍎 りんご</li>
...
<li class="menu-item">🍊 みかん</li>

.menu-item + .menu-item{
    margin-top: 10px;
}

上と左に統一すると、隣接セレクタが使えるので便利です。上のコードは『🍎 りんご』の上の余白は入りません。

marginとpaddingを正しく使い分ける

本来、paddingで入れるべき余白をmarginで入れると、意図しないmarginの相殺が起きるかもしれません。

paddingとmarginの使い分けをサンプルを使って解説！

marginとpaddingの使い分けに関しては、上の記事で具体例を用いて紹介しています。

カラクリ無しの完全無料！あなた専属のメンターが付く？