模写修行メディア

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

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

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

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

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

0からweb制作やプログラミングの勉強を始める方はもちろん、12ヶ月以上独学している方や既にお仕事をしている方にもご利用いただいています!

模写武者くんのアイコン
  • 独学に限界を感じている...
  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。個別説明会もお気軽にお申し込みください。

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています!

👆 メンターやってます 👆

この記事の目次

marginの相殺とは?

marginの相殺とは?

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

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

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

【駆け出しの方へ】独学に限界を感じてませんか?

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか?

  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています!

👆 メンターは全員現役エンジニア 👆

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

独学に限界を感じていませんか?

現役エンジニアによるメンタリングサービス作りました!

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

👇 こんな方のためのサービスです。

  • 独学に限界を感じている...
  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業のアドバイスが欲しい...

メンターを務めるのは、今も現役でコードを書いているエンジニアのみです。駆け出しの方やメンターだけをやっている方はいません。

高額な料金はかかりません。サブスク&入会金・解約料なしなので、リスクなく始められます。

少しでも興味がある方は、ぜひ下記のリンクからサービスサイトをご覧ください。個別説明会もお気軽にお越しください。(無理な営業等一切ございません!)

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています!

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

フリーランス8年を経て法人化(3期目)、業界歴は12年目。コンテンツ制作、ライティング、マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやってます!webサービスを作るのが好き!

当メディア運営メンバーでメンターやってます!👉

詳しく見る

\Share/

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

実務レベルを体験するためのコーディング練習教材