CSSのmarginの相殺って?

CSSでmarginを扱う場合、marginの相殺ってのが起こる場合があります。

「marginの相殺」って聞いたことありますか?

ぶっちゃけ僕は聞いたことありませんでした。

質問を受けて初めて知りました。

marginの相殺とは

そういう現象があることは知ってましたけど、「marginの相殺」という言葉は聞いたことありませんでした。

これは簡単に言うと、HTML要素が上下に2つ並んでいたとき、上の要素のmargin-bottomと下の要素のmargin-topの大きいほうだけが採用されるというものです。

 

marginとは、HTML要素の外側の余白のことです。

margin-bottomは、要素の下の余白の幅を指定し、margin-topは要素の上の余白の幅を指定します。

 

例えばdiv要素1とdiv要素2があったとします。

要素1には margin-bottom: 20px を、要素2には margin-top: 50px を設定します。

要素1と要素2の間は70px開きそうですが、大きいほうの50pxだけが採用されて、結果は50pxになります。

 

何故こうなるのか、何故こういう仕様にしたのかは分かりませんが、慣れると使い勝手がいいです。

chromeのデベロッパーツールで見る

上のコードを実際に表示し、chromeのデベロッパーツールで確認してみます。

chromeのデベロッパーツールについてはこちらの記事を見てください。

 

分かりやすいように要素に色もつけてみました。

まず上の要素(エリア1)のCSSを確認してみます。

margin-bottom: 20px;が反映されているのが分かります。

次に下の要素(エリア2)を確認してみます。

margin-top: 50px;が正常に反映されています。

このとき、下の要素のmargin-topの上辺が上の要素にぴったりくっついているのが分かりますね!

つまり、上の要素で設定したmargin-bottomが無視されているということです。

これがmarginの相殺です。

まとめ

marginの相殺は、HTML要素が上下に2つ並んでいたとき、上の要素のmargin-bottomと下の要素のmargin-topの大きいほうだけが採用されるというもの。

ちなみに左右の場合は相殺されません。

コロナの影響でみんな大変だから俺もなんかできること

僕は福井県に住んでいるのですが、戦時中に福井大空襲にあい、その直後に大震災にあってボロボロになった話をおばあちゃんに聞きました。

それでも復活することができ、不死鳥の町と言われるようになりました。

先人達には心から感謝し尊敬します。

リーマンショック、東日本大震災、コロナと数十年に一度と言われる被害が立て続けに起きていますが、僕たちは強いです。

今は苦しいかもしれませんがきっと復活できます。

僕は低学歴ですし小さな小さな粒でしかないですが、プログラミングに関しては必死に勉強し15年以上ごはんにありつけています。

プログラミングを勉強している人の役に立てるほどのスキルはあると思っています。

なので1人でもんもんと悩んでいる若手のエンジニア向けに質問を受け付けることにします。

自宅で待機されている間もパソコンとインターネットがあればプログラミングの勉強はできます。

  • PHP
  • SQL
  • HTML・CSS
  • jQuery

とは言ってもいきなり答えを聞いていたのではなかなか成長できないと思うのです。

なので質問の際には次のことをご連携ください。

  • 何をやりたいか
  • どんなことを調べたか、検索キーワードと参考にしたページのURL
  • 調べた結果どこが分からないか
  • できるなら試したコード

メッセージいはとりあえずTwitterにでもください。

質問はこちら

すぐに返事できないかもしれませんがご了承ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA