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

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

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

💡 コーディングの練習なら模写修行！

無料教材もあります！

【こんな方におすすめ】

• 実務のレベル感を知りたい
• プロの制作フローを学びたい
• 基礎学習中、もしくは終えたばかり
• CSS設計やSCSSを使った書き方を学びたい

公式サイトを見る

コーディング教材の【模写修行】は他の教材と何が違うのか？

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の相殺が起きるかもしれません。

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

超実務向け！コーディングの練習が出来るサービス作りました 🎉

模写修行は実戦に沿った形で、コーディングの"練習"ができるサービスです。

こんな方におすすめ！

• 実務のレベル感を知りたい
• プロの制作フローを学びたい
• 何を考えながらコードを書くのか知りたい
• 基礎学習中、もしくは終えたばかり
• CSS設計やSCSSを使った書き方を学びたい

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

他の書籍や教材との違いは、超初心者向け・学習用の書き方ではなく、実際の現場で通用する書き方や考え方にフォーカスしている点です。詳しくは下記の記事をご覧ください。

コーディング教材の【模写修行】は他の教材と何が違うのか？

無料教材もあります！👍

模写修行を見る

脱初心者！自信を持ってプロと言えるスキルを！

嬉しい声もいただいています！

自分のweb制作におけるコードの書き方、ファイル管理は模写修行さんから学ばせていただきました。独学の強い味方だと思いました。教材、メディアありがとうございました！
TwitterでDMいただきました！🙇

---

classの命名迷子・横並びレイアウト恐怖症だったけど、無料〜中級までいくつかやっていく中で、どんどん迷いが減っていって楽しかったです！解説記事もわかりやすい...！
Tweet

---

デザインきれいだし、解説とサンプルソースが付いて答え合わせしやすいところが良い。
Tweet

---

答え合わせ終わった。top-kvの実装方法に脱帽。そういうやり方があることを知れたことが大きい。。sass学びはじめたばかりなのでscssコードがとても参考になった。次からはscssでかく。
Tweet

---

無料教材もあります！👍

模写修行を見る

脱初心者！自信を持ってプロと言えるスキルを！