margin相殺とは?なぜ、このようになるのかの詳しい説明

こんにちは、tanaka です。

今回は、
marginの相殺についての説明します。

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

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

よくわからない結果に
なる時もあります。

margin相殺は、
html、cssを制作する際、
あらゆる個所で出てきます。

なので、
margin相殺について知ることは、

html、cssを学ぶ上で
とても重要です。

それでは詳しくみていきましょう。

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

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

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

margin相殺とは

まずは、
marginの相殺とは何かを説明します。
 ・display:blockの状態で
  marginがタテ方向で重なり合う場所は
  大きい値が優先されるというものです。

今回は、
marginの相殺の
大きい値が優先される
だけを説明します。

具体例

上の値が大きい

display:blockで
上下のmarginが重なり合う時
大きい値が優先されます。

(例)
上:margin 200px
下:margin 100px
これらを上下に配置するとどうなるか?

画像offsetmargin03

大きい値が優先されて、
200pxになります。

画像offsetmargin04

注意)marginは本来透明ですが、
わかりやすくするため紫色にしています。

上下が同じ値

値が同数の場合は
片方の値が採用されます。

(例)
上:margin 100px
下:margin 100px
これらを上下に配置するとどうなるか?

画像offsetmargin01

重なった部分は相殺されて、
100pxになります。

画像offsetmargin02

注意)marginは本来透明ですが、
わかりやすくするため紫色にしています。

なぜ、このような機能があるのか

この機能はおそらく

たくさん並べた時、
間隔が均等になるように
作られたのだと思います。

例えば

下の画像のようなものがあったとします。

画像offsetmargin05

これらを上下に並べて配置した場合
もし相殺がなかったら

blockとblockの
間だけ太くなり

上下を含めた
全ての空き量が
均等になりません。

画像offsetmargin06

しかし、
相殺があったら
このように、
空き量が均等になります。

画像offsetmargin07

注意)marginは本来透明ですが、
わかりやすくするため紫色にしています。

このために、
magin相殺が存在するのだと
考えられます。

まとめ

marginの相殺とは

marginの相殺とは、

display: blockの状態で、
marginがタテに重なった時

marginをいい感じに
調整してくれる機能。

1:marginの相殺

marginの相殺は大きい値が優先される。

2:marginの相殺

magin相殺が起きるのはdisplay:blockだけ。

inline、inline-blockでは、
margin相殺はおきない。

さらに、
詳しい説明は
別記事を用意しました。
よければご覧ください。

以上、
html,cssのmargin相殺、
の説明でした。

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

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