【入門編】p要素とh1-h6要素におけるマージンの相殺 – HTML実践ガイド

Webサイトを作り始めたばかりの頃、誰もが一度はこんな経験をするはずです。

「見出しと文章の間に、もっとたっぷり余白をとりたいのに、CSSで指定した通りにならない……」
「pタグとh1タグの間を広げたいのに、なぜか計算が合わない！」

実はこれ、あなたが悪いわけではありません。CSSには「マージンの相殺（Margin Collapsing）」という、ちょっと個性的で、慣れるまでは「お節介」に感じるルールがあるからなんです。

今日は、この「余白の不思議」を、身近な例えを交えながらスッキリ解決していきましょう。大丈夫、仕組みさえ分かれば怖くありませんよ！

—

まずは、この現象を身近なものに例えてみます。

想像してみてください。あなたは今、大事な書類を2枚、机の上に並べて置こうとしています。
1枚目（見出し）の下に「30pxの余白」を設け、2枚目（本文）の上に「20pxの余白」を設けたいとします。

普通に考えれば、その間には「30px + 20px = 50px」の隙間ができそうですよね？

しかし、Webブラウザという名の「几帳面な整理員」はこう言います。
「いやいや、そんなに隙間を空けたらもったいない！重ねられるところは重ねて、一番大きい余白だけを採用しよう！」

結果として、50pxになるはずだった隙間は、「大きい方である30px」だけになってしまう。これが「マージンの相殺」です。

HTMLにおいて、`h1`〜`h6`（見出し）や`p`（段落）といった要素は、デフォルトで上下にマージン（余白）を持っています。

昔のWebデザインの考え方では、「文書はコンパクトにまとまっているほうが美しい」とされていたため、ブラウザは「隣り合う要素の余白は、合計するのではなく、大きい方を採用する」というルールを採用したんですね。

でも、今のモダンなWeb制作現場では、このルールが「思うようなデザインにならない！」という原因になることがよくあります。

この相殺現象を回避したり、制御したりする方法はいくつかあります。現場でよく使う「鉄板のテクニック」をいくつかご紹介しますね。

一番シンプルで、後からメンテナンスしやすいのは「余白は下（margin-bottom）だけに指定する」というルールを自分で決めてしまうことです。

/ 見出しも段落も、下側にだけ余白を持つルールにする /
h1, h2, p {
margin-top: 0; / 上のマージンは消す /
margin-bottom: 20px; / 下にだけ余白を置く /
}

こうしておけば、上下で合計されることもないので、計算が非常に楽になります。

実は、上下の要素の間に「パディング（padding）」や「ボーダー（border）」という名の『薄い壁』を挟むと、マージンは相殺されなくなります。

.container {
/ ほんの少しのパディングやボーダーを入れるだけで相殺は止まります /
padding: 0.1px;
}

ただし、これはデザインに影響が出ることもあるので、最終手段として覚えておくと便利です。

—

実際に、ブラウザでどう見えるか試してみましょう。以下のコードをコピーして、HTMLファイルとして保存してみてください。

見出しの下に50px

段落の上に20px（でも隙間は50pxのまま！）

Web制作を始めたばかりの頃は、ブラウザのこうした「勝手な判断」に振り回されて、「自分のコードが間違っているのでは？」と不安になることもあるかもしれません。

でも、安心してください。世界中のプロのエンジニアも、同じように「あれ？余白が消えた！」と毎日戦っています。

「マージンの相殺は、ブラウザが気を利かせすぎた結果なんだな」と、コーヒーでも飲みながら、少し余裕を持って付き合ってみてください。そうやって一つひとつ仕組みを理解していくあなたの歩みは、確実に「プロのフロントエンド・エンジニア」へと繋がっていますよ！

何か分からないことがあったら、いつでもまた聞きに来てくださいね。応援しています！