【HTML & CSS】marginが重なると相殺し合う

私はプログラマーです。普段CSSを触る事は滅多にありません。
それでもCSSを触らないといけない事も、時々あります。
そんな時によく遭遇するのが「marginが効かないっ！！」です。

すこ～し前にmarginが重なると、一方のmarginが効かなくなるようなことは、ネットで検索して知っていました。
「ふ～ん」って感じで読み流しちゃって、ちゃんと理解していませんでした。
今回はしっかり理解したいと思います(｀・ω・´)ｷﾘｯ

marginが相殺し合うパターン

CSSでは「上下のマージンは重ねて表示する」というルールがあります。

同階層の要素の場合

下記の画像はdivTopにmargin-bottom: 40pxを指定しています。


次にdvBottomにmargin-top: 20pxを指定します。
divTopの下マージン ＋ divBottomの上マージンで、divTopとdivBottomの間隔は60pxになると思ってました。
でも結果は先ほどと変わりません。


CSSでは「上下のマージンは重ねて表示する」というルールがあります。
上記の例でいうとdivTopのmargin-bottomとdivBottomのmargin-topが重なり、marginが大きいdivTopのmargin-bottomだけの間隔があきます。


例えばdivBottomのmargin-topを60pxに設定すると、divTopのmargin-bottomより大きいので、divBottomのmargin-topだけの間隔があきます。

親子要素の場合

下記の画像は水色が親のdiv、赤色が子のdivです。

<div class="divParent">
 <div class="divChild">divChiled</div>
</div>

.divParent{
 width: 100px;
 height: 100px;
 background-color: #7ef1e0;
}

.divChild{
 background-color: #f17e7e;
 width: 70px;
 height: 40px;
}

それでは親のdivParentにmargin-top: 10pxを設定し、子のdivChildにmargin-top: 30pxを設定してみます。
私の希望する結果は下記の画像のように、親要素が10px下がって、子要素は親要素から30px下がっている状態です。


結果は親要素も子要素も30px下がってます。

親要素のmargin-topと子要素のmargin-topが相殺され、大きい方の子要素のmargin-topが適用されています。

marginが相殺されないケースがある

相殺されるなら必ずされる。相殺されないならすべての条件で相殺されない。とハッキリしてくれていたらいいのに
ある一定の条件下で相殺されないケースがあります。

同階層の要素の場合

• 要素にfloatが指定されているとき

親子要素の場合

• 親要素にborderが指定されているとき
• 親要素にpaddingが指定されているとき
• 親要素が空でないとき
• ・・・etc

今の私には相殺されないケースすべてを理解することは無理なので、親子要素の３つのケースについて試してみました。

親子階層でmarginが相殺されている状態です。
親のdivParentにmargin-top: 10pxを設定し、子のdivChildにmargin-top: 30pxを設定しているので
子要素のmargin-top: 30pxが適用されている状態です。


親要素にborderを指定してみます。marginは相殺されていません。


次は親要素にpaddingを指定してみます。こちらもmarginは相殺されていません。


最後に親要素に文字を入れてみます。こちらもmarginは相殺されていません。

<div class="divParent">divParent
 <:div class="divChild">divChiled</div>
</div>

今回理解したことは「マージンには気をつけろ」( ´▽｀ )ノ