模写修行メディア

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

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

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

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

marginの相殺とは?

marginの相殺とは?

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

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

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

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

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

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

重要!
marginの相殺が起こるのは上下のmarginだけです。左右のmarginでは起こりません。

隣接する兄弟要素間のmargin

隣接する兄弟要素間の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

上方向のmargin
<div class="parent">
    <div class="child">box</div>
</div>
.parent{
    margin-top: 10px;
}
.child{
    margin-top: 30px;
}

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


💡 下方向のmargin

下方向のmargin
<div class="parent">
    <div class="child">box</div>
</div>
.parent{
    margin-bottom: 10px;
}
.child{
    margin-bottom: 30px;
}

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

下方向のmargin
.parent{
    hight: 200px;
    margin-bottom: 10px;
}
.child{
    margin-bottom: 30px;
}

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

注意!
大きい方が採用されるわけではありません。" 親要素のmargin-bottom "が採用されます。

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

下方向のmargin
<div class="space"></div>
.space{
    margin-top: 30px;
    margin-bottom: 10px;
}

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

下方向のmargin

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

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

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

注意!
実際は、例外というより、ただそのような仕様になっているだけです。例外と表現した方がわかりやすいと思ったので、そうしています。

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

inline-block;の指定がある
<div class="box">box</div>
<div class="box02">box</div>
.box{
    margin-bottom: 30px;
}
.box02{
    margin-top: 10px;
    display: inline-block;
}

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

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

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

親要素にborderやpaddingがある

親要素に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アイテム

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

ネガティブ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が指定されている

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の相殺は起こりません。

補足
この検証のため、数年ぶりにfloatを書きました。今はFlexboxやCSS Gridが使えるので、floatを使う機会はかなり少ないです。

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

親要素に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の使い分けに関しては、上の記事で具体例を用いて紹介しています。

コーディングの練習が出来るサービスを作りました 🎉

模写修行はこんな方におすすめ!

  • プロの制作フローを学びたい
  • どんなことを考えながら書くのか知りたい
  • 実践的な練習がしたい

【初級編】はこんな方におすすめ!

  • 基礎学習中、もしくは終えたばかり
  • サイト制作経験が5サイト未満 (実際の案件でなくてもOK)

【中級編】はこんな方におすすめ!

  • CSS設計を意識したコーディングを学びたい
  • SCSSを使った書き方を学びたい (解説はSCSSを使わない前提でします)

模写修行ではデザインデータ(XD) / web上で見れる解説 / サンプルコードを配布しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで深く学ぶことができるサービスです。

模写修行を見る

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

大学・大学院時代から個人で仕事をする。卒業後5年間のフリーランス期を経て、法人化。マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやります。webサービス作るのが好き!

\Share/

模写修行のトップページのスクリーンショット
模写修行

駆け出しエンジニアのためのコーディング練習教材