【6日でできるHTML＆CSS入門】マージンの相殺

　ウェブページをデザインするとき、要素同士の距離や余白を「マージン（margin）」で調整します。しかし、上下に並んだ要素のマージンが重なる（相殺される）現象があることをご存知でしょうか？
　この仕組みを「マージンの相殺（margin collapsing）」と呼びます。思ったより要素の間が狭かったり広かったりして、レイアウトで戸惑った経験がある方も多いはずです。この記事では、マージンの相殺の基本から、よくあるパターン、実際のHTMLサンプルとともに分かりやすく解説します。

1. マージンの相殺とは

1.1. マージンの相殺の概要

　マージンの相殺とは、上下の隣り合うブロック要素のマージンが足し算ではなく、どちらか大きいほうだけが適用されるCSSの仕様です。

用語	内容
マージンの相殺	隣接する上下マージンのうち大きいほうだけ有効

1.2. 基本的なサンプルで確認

ファイル名： lesson31_1.html

<!DOCTYPE html>
<html>
<head>
  <title>マージン相殺の例</title>
  <meta charset="utf-8"/>
  <style>
    .blockA {
      margin-bottom: 24px;
      padding: 16px;
      background-color: #b3e0ff;
    }
    .blockB {
      margin-top: 48px;
      padding: 16px;
      background-color: #b3ffd9;
    }
  </style>
</head>
<body>
  <div class="blockA">ブロックA<br>margin-bottom: 24px;</div>
  <div class="blockB">ブロックB<br>margin-top: 48px;</div>
</body>
</html>

表示結果

blockA の下マージンは24px、blockB の上マージンは48pxですが、間隔は「48px」になります。
マージンは合計されず、大きい方だけが適用されます。

２．マージン相殺が起こるパターン

2.1. ブロック要素の上下での相殺

隣接したブロック要素同士の上下マージンが相殺されます。

ファイル名： lesson31_2.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <style>
    .upper {
      margin-bottom: 32px;
      background-color: #fffae0;
    }
    .lower {
      margin-top: 56px;
      background-color: #e0fff9;
    }
  </style>
</head>
<body>
  <section class="upper">上の要素（下マージン32px）</section>
  <section class="lower">下の要素（上マージン56px）</section>
</body>
</html>

表示結果

上下の間隔は56pxになる。

2.2. ネストした要素（親子間）の相殺

親要素の上部・下部と、その最初や最後の子要素のマージンが相殺されることがあります。

ファイル名： lesson31_3.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <style>
    .parent {
      border: 2px solid #444;
      margin-top: 30px;
      margin-bottom: 30px;
    }
    .child {
      margin-top: 40px;
      margin-bottom: 50px;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">子要素（margin-top: 40px; margin-bottom: 50px;）</div>
  </div>
</body>
</html>

表示結果

親要素の上下マージンと子要素の上下マージンのうち、大きい方が外側に現れる。

３．HTMLタグ・CSSプロパティ解説表

タグ・プロパティ	説明
`<div>`	汎用ブロック要素
`<section>`	セクション分けのブロック要素
`margin-top`	上側の外側余白を指定
`margin-bottom`	下側の外側余白を指定
`overflow`	ボックスのはみ出し挙動。hidden等で相殺回避
`border`	枠線を設定
`background-color`	背景色を指定
`padding`	内側余白を設定（相殺回避に使うことも）

まとめ

　マージンの相殺は、ウェブレイアウトの実装で「なぜ？」と感じやすいポイントですが、基本を知っていれば狙い通りのデザインがしやすくなります。
相殺の仕組みや、回避のテクニックも活用しながら、思い通りの余白を作りましょう。