上下に意図しない余白ができる・margin相殺が起きるときの対処

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が付き検索結果には出ません。