---
title: "上下に意図しない余白ができる・margin相殺が起きるときの対処"
description: "ブロック間の余白が思ったより詰まる、子要素のmarginが親からはみ出すと悩むコーダー向け。margin相殺（マージンの折りたたみ）の仕組みと、回避する具体的な方法をまとめています。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/margin-collapse-unexpected-gap"
markdown: "https://giga-site.com/articles/margin-collapse-unexpected-gap/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# 上下に意図しない余白ができる・margin相殺が起きるときの対処

上のブロックと下のブロックに余白を付けたのに、思ったより詰まって見える。あるいは親要素から子要素のmarginがはみ出してしまう。これは多くの場合、隣接や親子のmarginが一つにまとめられる「margin相殺(マージンの折りたたみ)」が原因です。条件を知れば確実に止められます。

> Source HTML: https://giga-site.com/articles/margin-collapse-unexpected-gap
> Article index: https://giga-site.com/articles/index.md

## margin相殺とは何か

margin相殺とは、垂直方向の上下のmarginが隣り合ったとき、それらが合算されずに「大きい方の値」一つにまとめられる仕様です。たとえば下に40pxのmarginを持つ要素と、上に30pxのmarginを持つ要素が隣り合うと、合計70pxではなく40pxの余白になります。

これはCSSの正式な挙動でありバグではありません。文章主体のページで段落同士の間隔が均一に保たれるよう設計された仕組みです。ただしレイアウトを細かく組むときには、足したはずの余白が消えたように見えて混乱の原因になります。

相殺が起きるのは原則として垂直方向(上下)のmarginだけで、左右のmarginは相殺されません。横並びのレイアウトで悩んだときは、まず縦方向の問題かどうかを切り分けると早いです。

## 相殺が起きる3つのパターン

一つ目は「隣接する兄弟要素」です。上下に並んだ2つのブロックの、下要素の上marginと上要素の下marginがまとまります。

二つ目は「親要素と最初/最後の子要素」です。親にborderやpaddingがないと、子要素の上marginが親をすり抜けて親の外側に出てしまい、親の上に余白ができたように見えます。

三つ目は「空のブロック要素」です。中身もborderもpaddingもない要素は、自分自身の上下marginが相殺して潰れます。意図しない余白が一つだけ残るときはこのパターンを疑います。

## 症状別チェック表

上下に意図しない余白ができる・margin相殺が起きるは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

## 相殺を止める手順

親子間の相殺は、親に薄いpaddingやborderを与える、あるいは親をBFC(ブロック整形コンテキスト)にすることで止まります。次の順で試すと無駄がありません。

1. まず開発者ツールでどの要素のmarginが消えているかを特定する
2. 親子間の相殺なら親に padding-top: 1px か border の代わりに overflow: hidden を付けて確認する
3. 兄弟間の相殺なら、片方のmarginだけに値を寄せる(上だけ/下だけに統一)
4. flexやgridのレイアウトに切り替え、gapで間隔を管理する
5. 段落の余白設計はmarginの片側統一かgapに寄せて、相殺自体が起きない構造にする

## flex・gridを使えば相殺は起きない

display: flex や display: grid のコンテナの中では、子要素間でmargin相殺は発生しません。そのため近年は、要素間の間隔をmarginではなくgapプロパティで指定する設計が主流になっています。

gapは「要素と要素のすき間」を直接指定する考え方なので、相殺を気にせず狙った値がそのまま反映されます。新規に組むレイアウトでは、最初からgapベースにしておくとトラブルが減ります。

既存ページの修正では全面的な作り替えが難しいこともあります。その場合は相殺を止める小技で対処しつつ、新規ブロックからgapに寄せていくと移行しやすいです。

## 修正前後を共有して確認してもらう

余白の問題は、自分の画面では直って見えても、相手の環境やズーム倍率で印象が変わることがあります。修正案を関係者に見てもらうときは、実際に表示できるページを渡すのが確実です。

ギガサイト便は、修正したHTMLやCSS/JS入りのZIPをドロップするだけで共有URLを発行できます。同じURLのままファイルを差し替えられるので、余白を微調整するたびにリンクを送り直さずに最新版を確認してもらえます。

社外のデザイナーやクライアントに見せる場合は、URLにパスワードやメール認証を付けて閲覧者を限定できます。一時公開ページにはnoindexが付き検索結果には出ません。

## よくある質問

### 左右のmarginも相殺されますか

いいえ。margin相殺は垂直方向(上下)のmarginだけに起きる仕様です。左右(水平方向)のmarginは相殺されず、指定した値がそのまま加算されます。横並びで余白が足りない・多いときは別の原因を探してください。

### 親要素から子のmarginがはみ出すのを手早く止めたいです

親要素に overflow: hidden や display: flow-root を指定してBFCを作るのが手軽です。padding-top や border-top を1pxだけ足しても止まりますが、デザインに影響しない方法を選んでください。

### 相殺された結果、大きい方と小さい方どちらの値が残りますか

正の値同士なら大きい方が残ります。正と負が混在する場合は両者を足し合わせ、負同士なら絶対値が大きい方(より大きく引かれる)が適用されます。

### そもそも相殺を起こさない設計はありますか

間隔をgapで管理するflex/gridレイアウトにする、もしくは余白をmarginの上下どちらか一方向に統一する設計にすると、相殺自体がほぼ発生しなくなります。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [公開後にJavaScriptが動かないときの原因と直し方](https://giga-site.com/articles/javascript-not-working/index.md)
- [公開後に動画が再生されないときの対処](https://giga-site.com/articles/video-not-playing/index.md)
- [公開したHTMLのフォームが送信できないときの対処](https://giga-site.com/articles/form-not-submitting/index.md)
- [iframeが表示されないときの原因と対処](https://giga-site.com/articles/iframe-not-showing/index.md)
- [外部CDNのCSS・JSが読み込めないときの対処](https://giga-site.com/articles/external-cdn-not-loading/index.md)
- [スマホだけ表示が崩れるときの原因と直し方](https://giga-site.com/articles/broken-only-on-mobile/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "上下に意図しない余白ができる・margin相殺が起きるときの対処",
  "description": "ブロック間の余白が思ったより詰まる、子要素のmarginが親からはみ出すと悩むコーダー向け。margin相殺（マージンの折りたたみ）の仕組みと、回避する具体的な方法をまとめています。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/margin-collapse-unexpected-gap",
  "url": "https://giga-site.com/articles/margin-collapse-unexpected-gap",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "左右のmarginも相殺されますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "いいえ。margin相殺は垂直方向(上下)のmarginだけに起きる仕様です。左右(水平方向)のmarginは相殺されず、指定した値がそのまま加算されます。横並びで余白が足りない・多いときは別の原因を探してください。"
      }
    },
    {
      "@type": "Question",
      "name": "親要素から子のmarginがはみ出すのを手早く止めたいです",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "親要素に overflow: hidden や display: flow-root を指定してBFCを作るのが手軽です。padding-top や border-top を1pxだけ足しても止まりますが、デザインに影響しない方法を選んでください。"
      }
    },
    {
      "@type": "Question",
      "name": "相殺された結果、大きい方と小さい方どちらの値が残りますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "正の値同士なら大きい方が残ります。正と負が混在する場合は両者を足し合わせ、負同士なら絶対値が大きい方(より大きく引かれる)が適用されます。"
      }
    },
    {
      "@type": "Question",
      "name": "そもそも相殺を起こさない設計はありますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "間隔をgapで管理するflex/gridレイアウトにする、もしくは余白をmarginの上下どちらか一方向に統一する設計にすると、相殺自体がほぼ発生しなくなります。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```