なぜ「pタグの上下マージン」で現場のエンジニアは沼るのか？
フロントエンド開発の現場で、CSSの「マージン相殺（Margin Collapsing）」ほど、新人から中級者までを悩ませ、時に「ブラウザのバグじゃないか？」と疑わせる仕様はありません。
特に`p`タグ。HTMLを書く際、最も頻繁に使うテキスト要素ですが、CSSを当てた瞬間に「あれ、隣の要素との距離が想定より狭い（あるいは広い）ぞ？」と違和感を覚えたことはありませんか？
今回は、ブラウザのデフォルトスタイル（UAスタイルシート）の呪縛を解き、マージン相殺を味方につけるための「現場の最適解」を共有します。
—
1. ブラウザは「pタグ」に何を仕込んでいるのか？
まず前提として、ブラウザ（Chrome, Safari, Firefoxなど）は、何の指定もしていない`p`タグに対して、以下のようなUAスタイルを強制的に適用しています。
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
この`1em`という指定が曲者です。親要素のフォントサイズが変動すればマージンも連動して動くため、レスポンシブ対応の初期段階でレイアウトを複雑にする主犯格になります。これに「マージン相殺」という仕様が加わることで、計算がさらに狂い始めるのです。
—
2. 「マージン相殺」の正体：なぜ隙間が合算されないのか
マージン相殺とは、「隣接するブロックレベル要素の上下マージンが重なり合った時、大きい方の値が優先され、小さい方は無視される」というCSSの仕様です。
- ケース: `p`タグAと`p`タグBが並んでいる。
- 挙動: Aの`margin-bottom: 20px`とBの`margin-top: 20px`が合わさったとき、期待値は`40px`ですが、実際は`20px`になります。
これを「バグ」と捉えるか、「意図的な挙動」と捉えるかでエンジニアとしての練度が分かれます。W3Cの仕様としては、ドキュメントの段落間に適切な空白を作るための非常に合理的な設計なのですが、ピクセル単位の精密なデザイン実装が求められるモダンなWeb制作では、この「勝手な計算」が時に障害となります。
—
3. 実務で採用すべき「モダンなマージン制御」
現場で最も嫌われるのは、場当たり的に`margin: 0`を連発して、後から「余白が足りない！」とパッチを当てていく修正方法です。
私の推奨するベストプラクティスは、「マージンは原則として一方向（下方向）のみに付与する」というルールを徹底することです。これだけで、マージン相殺の複雑な挙動に頭を悩ませる必要が激減します。
すぐ使えるベストプラクティス・サンプル
以下のコードは、リセットCSSに追記、もしくはベーススタイルとして読み込ませておくことで、プロジェクト全体の余白管理を劇的にクリーンにします。
/ ベーススタイル：pタグの余白を制御する /
p {
/ UAスタイルの上下マージンをリセット /
margin-top: 0;
margin-bottom: 1.5rem; / サイト全体で共通の段落間隔を定義 /
/ 行間（line-height）を調整して読みやすさを確保 /
line-height: 1.8;
}
/ 最後のpタグには余白を持たせない（親要素のpaddingと衝突を防ぐ） /
p:last-child {
margin-bottom: 0;
}
/ 補足：あえて「マージン相殺」を使いたい箇所があるなら /
.content-wrapper > + {
/ 兄弟セレクタを使い、要素間にのみ上マージンを適用する手法も非常に強力です /
margin-top: 1.5rem;
}
—
4. プロの視点：なぜこれが必要なのか
上記のサンプルコードで重要なのは、単にマージンを消すことではなく、「余白の責任を明確にする」という点です。
1. `margin-bottom`のみに寄せる:
上マージンか下マージンのどちらを使うかで迷う時間をゼロにします。
2. `last-child`のケア:
親要素（カードやセクション）に`padding`を設定した際、最後の要素のマージンが突き抜けてレイアウトが崩れる現象を確実に防ぎます。
3. ` + `（隣接セレクタ）の活用:
CSS設計（BEMやFLOCSSなど）を導入しているプロジェクトでは、この手法が「コンポーネントの再利用性」を最も高く保てます。
最後に：CSSは「制御」するもの
CSSの仕様に振り回されるのは今日で終わりにしましょう。ブラウザが裏で何をしているのかを知り、それを制御するための「ルール」を自分の手でコードに落とし込む。これこそが、中級者からシニアへとステップアップするフロントエンドエンジニアの仕事です。
まずは明日、あなたのプロジェクトの`p`タグに、この設計指針を適用してみてください。チームメンバーの誰かが「あれ、なんかレイアウトが安定してない？」と気づいてくれたら、しめたものです。
コメント