margin相殺のさらに詳しい説明(html,css)

こんにちは、tanaka です。

今回は、
margin相殺について
一歩踏み込んで詳しく説明します。

margin相殺とは、
 タテ並び display: block の margin を
 いい感じに調整してくれる
 機能です。

しかし、
必ずしもmarginを
いい感じに調整してくれる
わけではなく、

思ってもない結果に
なる時もあります。

しかし、
margin相殺の起きる条件を
知っていれば

適切に対処することも
可能です。

それでは、
どんな時に
margin相殺は起きるのか?

margin相殺は、
大きく分けて3つの状態で起きます。
 1:上下(兄弟要素)
 2:親要素と子要素
 3:自らの上下(htmlの中身がカラの場合のみ発生)

それでは
詳しく説明していきます。

そもそも
margin相殺とは何?

と言う方に、
記事を用意しました。
よければお読みください。

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

margin相殺の説明

margin相殺とは

margin相殺とは何かを説明します。

 ・display:blockの状態で
  marginがタテ方向で重なり合う場所は
  大きい値が優先されるというものです。

 ・片方のmarginが0でも
  margin相殺は起こります。

画像offsetmargin03

上200px
下100px
で配置すると
大きい値が優先される。

画像offsetmargin04

margin相殺の発生3種

margin相殺は、
大きく分けて3つの状態で起きます。
 1:上下(兄弟要素)
 2:親要素と子要素
 3:自らの上下(htmlの中身がカラの場合のみ発生)

1:上下(兄弟要素)

上下(兄弟要素)で
margin相殺は起こります。

一般的にmargin相殺といえば
この形を言うと思われます。

画像offsetmargin03

上200px
下100px
で配置すると
右のようになる→

画像offsetmargin04

2:親要素と子要素

親要素と子要素との間で
margin相殺は起こります。

親要素と子要素のmargin相殺は、
とても厄介で、

大体これが
トラブルの原因になっています。

親要素と子要素のmargin相殺は、

 ・自らの親要素、子要素

 ・上の親要素、子要素
  下の親要素、子要素

marginが重なるところは、
全てmargin相殺が発生します。

画像offsetmargin01-01

3:自らの上下

自らの上下で
margin相殺は起こります。
(htmlの中身がカラの場合のみ発生)

中身の入っていないhtmlを
作ることが少ないため、

あまり気にしなくても良い
margin相殺です。

htmlの中身がカラだと
自身のmarginの上下が直接触れます。
 ・自身の margin-top
 ・自身の margin-bottom

そのため、
margin相殺が発生し
どちらか大きい方が優先され残ります。

テストページなどで
カラのhtmlに対し
marginを使い、

大きい空白を作った際には
注意が必要です。

margin相殺の具体例

親要素と子要素だけを説明

具体例は、
もっとも厄介な

親要素と子要素だけを
みていきます。

自らの親要素、子要素

margin相殺は、
自らの親要素、子要素の間でも
起こります。

その様子を知ってもらうために
見本を用意しました。

 ・ムラサキ = 親要素
 ・黒    = 子要素

画像offsetmargin01-02

今からこの黒(子要素)の全周に
marginを入れます。

そうすると、
どうなるでしょうか?

普通は、
このようになると予測しますが

画像offsetmargin01-03

残念ながら、この形にはなりません。

結果は、
下の画像のような形になります。

画像offsetmargin01-04

左右は、
margin相殺と関係ないため
普通にmarginが入っています。

一方

上下は、
親子間でmargin相殺が起きたため
このような形になりました。

すこし難しい話ですが
今現在

親要素 margin = 0
子要素 margin = 全周

このようになっています。

親要素のmarginは0です。
にもかかわらず

値が0に対して
margin相殺は起きています。

さらに、
理由は分かりませんが

親子間でmargin相殺が起きた時は
親要素あつかいになる
みたいです。

 margin相殺後
親要素margin

子要素margin
0px

50px
親要素margin 50px

子要素margin 消失

親子間のmargin相殺は、全て親marginあつかいに

親要素は、
値が0にもかかわらず
子要素とmargin相殺を起こします。

そして、
子要素のmarginを
親要素自身のmarginとしたため

本来あるべき子要素のmarginは無く
親要素にmarginを奪われたため

親要素のmarginが表示され、
上下は透明となっています。

画像offsetmargin01-04

1:値が 0 でもmargin相殺は起きる
2:親子間のmargin相殺は、全て親marginあつかいになる

注意)
2:親子間のmargin相殺は、全て親marginあつかいになる

これは、私 tanaka の考えであって
確証はありません

上(親要素、子要素)下(親要素、子要素)挟まれた場所でmargin相殺

margin相殺は、
自らの親要素、子要素の間でも
起こります。

ならば、
上下の親子で挟めば
どうなるのでしょうか?

その様子を知ってもらうために
見本を用意しました。

 ・ムラサキ = 親要素
 ・黒    = 子要素

画像offsetmargin01-05

今からここへ
marginを入れていきます。

親要素 margin 50px ↓子要素 margin 50px ↓
親要素 margin 50px ↑子要素 margin 50px ↑

このように中央へ向けて
全て同じ値のmarginを
4つ入れます。

結果は4つ全てで
margin相殺を起こしました。

画像offsetmargin01-06

まとめ

margin相殺とは

margin相殺とは

 ・display:blockの状態で
  marginがタテ方向で重なり合う場所は
  大きい値が優先されるというもの。

 ・片方のmarginが0でも
  margin相殺は起こる。

margin相殺の3つの状態

margin相殺は、
大きく分けて3つの状態で起きる。
 1:上下(兄弟要素)
 2:親要素と子要素
 3:自らの上下(htmlの中身がカラの場合のみ発生)

1:上下(兄弟要素)

1:上下(兄弟要素)

 一般的な、
 上下の兄弟要素による
 margin相殺。

2:親要素と子要素

2:親要素と子要素

 親要素と子要素との間で起きる
 margin相殺。
 (大体これがトラブルの原因)

 ・値が 0 でもmargin相殺は起きる

 ・親子間のmargin相殺は、
  全て親marginあつかいになる

 margin相殺後
親要素margin

子要素margin
0px

50px
親要素margin 50px

子要素margin 消失

注意)”全て親marginあつかいになる” は、
私 tanaka の考えであって
確証はありません

3:自らの上下

3:自らの上下

自らの上下で
margin相殺は起こります。
(htmlの中身がカラの場合のみ発生)

htmlの中身がカラだと
自身のmarginの上下が直接触れます。

 ・自身の margin-top
 ・自身の margin-bottom

それにより、html要素単体でも
margin相殺を起こす。

以上、
margin相殺のさらに詳しい説明(html,css)
の話でした。

ありがとうございました。

タイトルとURLをコピーしました