【CSS】マージンの相殺とは？（Collapsing Margins）

記事を見て学びになった方はこちらもご覧ください！Kindle Unlimitedでスキルを上げる

目次

1. マージンの相殺とは

2. 解説

3. マージンの相殺のベストプラクティスと注意点

4. 注意点

5. まとめ

マージンの相殺とは

CSSにおいて、マージンの相殺は、隣接する要素間のマージンが一方に集約される現象です。これは特にブロック要素間で顕著に見られ、例えば、縦に並んだ要素の上下マージンが相殺されることがあります。

この挙動は予期せぬレイアウトのズレを引き起こすことがあるため、デザインを正確に制御するにはこの挙動を理解し適切に扱う必要があります。

<div class="container">
    <div class="box" id="box1">ボックス1</div>
    <div class="box" id="box2">ボックス2</div>
</div>

/* スタイルをリセットし、視覚的に理解しやすくするための基本スタイル */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
}

.container {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
  background-color: #f8f8f8 ;
}

.box {
  width: 100%;
  padding: 20px;
  background-color: #ffd700 ;
  border: 1px solid #000 ;
  /* マージンの相殺を観察するためのマージン設定 */
  margin-bottom: 30px;
}

/* ボックス2に対する追加のマージン設定 */ #box2  {
  margin-top: 50px;
}

解説

この例では、2つの .box 要素（ボックス1とボックス2）が縦に並んでいます。それぞれには下マージン（margin-bottom: 30px;）が設定されており、ボックス2には上マージン（margin-top: 50px;）も設定されています。

通常、ボックス1の下マージンとボックス2の上マージンが合算されて80pxになると期待されますが、実際にはマージンの相殺が発生します。この場合、より大きな値である50pxが適用され、両ボックス間のスペースは50pxになります。

この現象は「Collapsing Margins」と呼ばれ、ブロック要素の垂直方向のマージンが隣接している場合に生じます。

CSSにおけるマージンの相殺は主に垂直方向に起こります。これを「Collapsing Margins」と呼びます。一般的なルールとして、垂直方向に隣接するブロック要素の上下マージンは、大きい方のマージンに吸収されます。ただし、フロート要素や絶対位置指定要素、インラインブロック要素など、特定の条件下ではこのルールから例外が生じます。

また、水平方向のマージン相殺は一般的ではありませんが、特定のレイアウトやフレックスボックスモデルで意識する必要があります。

実際のウェブデザインにおいて、マージンの相殺を理解し適切に扱うことは重要です。

マージンの相殺のベストプラクティスと注意点

マージン相殺のベストプラクティス

続きはこちら
https://eguweb.jp/css/70822/