Open2023/06/17にコメント追加2

CSSマージンの相殺

マージンの相殺

マージンが直接触れ合っている状態の2つの要素がある際におこるマージンの相殺について
マージンの相殺は、縦方向にのみ起こる

両方のマージンが正の数の場合
2つのマージンが結合して1つのマージンとなります。
注意
(マージン1 + マージン2= 2つの合計マージン)にはなりません。
どちらか一方のマージンの値が使用されます。
その基準はどちらがより大きい値を持っているかです。

以下のコード例では、2つのdiv要素を設置してborderプロパティを与えています。

異なる点
- 1つ目のdiv要素(firstクラス)には、margin-bottom: 50px;
- 2つ目のdiv要素(secondクラス)はmargin-top: 30px;

  <body>
    <section>
      <div class="container first">
        <p>ジュゲムジュゲム</p>
      </div>
      <div class="container second">
        <p>いろはにほへと</p>
      </div>
    </section>
  </body>

section {
  border: 3px solid black;
  margin: 40px;
}
.container {
  background-color: cornflowerblue;
  color: aliceblue;
  border: 4px solid goldenrod;
}

/* 1つ目のdiv要素のマージンを設定 */

.first {
  margin-bottom: 50px;
}
/* 2つ目のdiv要素のマージンを設定 */
.second {
  margin-top: 30px;
}

両方のマージンが負の数の場合
- 両方正の数と同じ挙動をします。
- 一番小さな(マイナスよりの数)がマージンの値が使用されます。
一方が (正 or 負)の数の場合
- 正の数から負の数が引かれた合計値が全体のマージンとなります。
- 正の数 + 負の数 = 全体のマージン　(40px + -20px = 20px )

参考サイト

MDN ボックスモデル

coeur

MDN マージンの相殺の習得