なぜか余白が消える？HTMLの「pタグ」と「マージンの相殺」という不思議な現象
Web制作を始めたばかりの皆さん、こんにちは！
HTMLを書き始めて、まず最初にぶつかる「あれ？」という瞬間。その代表格が、「pタグ（段落）の上下にできる謎の余白」や、「なぜか余白が重なって消えてしまう」という現象ではないでしょうか。
「CSSでマージン（margin）を指定したのに、思った通りの隙間が空かない…！」と、深夜に頭を抱えた経験がある方も少なくないはず。実はこれ、ブラウザが良かれと思ってやっている「あるルール」が原因なんです。
今日は、この「マージンの相殺（そうさい）」という、ちょっと不思議で、でも避けては通れないWebデザインの基本ルールを、一緒に紐解いていきましょう。
—
1. ブラウザは「親切なお節介」を焼いている
まず、真っさらなHTMLに `p` タグを書いてみてください。CSSを何も書かなくても、なぜかpタグの上下には隙間が空きますよね。
これは、ブラウザが「文章が読みやすいように」と、あらかじめデフォルトのスタイル（User Agent Stylesheet）を適用してくれているからです。いわば、「何も言わなくても最初から余白を付けておきましたよ！」というブラウザの親切心なのですが、これが後々レイアウトを組むときに、少しだけ厄介な存在になるのです。
2. 「マージンの相殺」ってなに？
さて、ここからが本題です。マージンの相殺とは、「隣り合う要素同士のマージンが合体して、大きい方の値に吸収されてしまう現象」のことです。
これ、言葉だと難しく聞こえますよね。「お財布の共有」に例えてみましょう。
- あなた（上のpタグ）は「自分のお小遣いとして1000円（margin-bottom: 20px）」持っています。
- お友達（下のpタグ）も「自分のお小遣いとして1500円（margin-top: 30px）」持っています。
本来なら二人が並ぶと、合計で2500円分の隙間ができるはずですよね？
ところが、この「マージンの相殺」が働くと、「二人で持っているお金の中で、一番大きい金額（1500円）だけを採用して、小さい方は無かったことにする」というルールが発動してしまうのです。
つまり、隙間が「20px + 30px = 50px」になるのではなく、「大きい方の30pxだけ」になってしまう。これが「相殺」の正体です。
3. 実験してみよう
実際にどうなるか、簡単なコードで見てみましょう。
いかがでしょう？ 画面を確認すると、期待していたよりも隙間が狭く感じませんか？ これが初心者が「CSSが効いてない？」と勘違いする最大の罠です。
4. どうやって解決すればいいの？
この現象はバグではなく、仕様です。ですので、「消えないようにする」というよりは、「相殺が起きないように工夫する」のがプロの現場のやり方です。
いくつか代表的な回避策をご紹介します。
- パディング（padding）を使う:
マージンではなく内側の余白である `padding` を使うと、相殺は起きません。「隙間が欲しいなら、外側ではなく内側で調整する」という考え方です。
- 親要素に境界線やパディングを少し入れる:
親要素に `padding: 1px` を入れるだけでも、この相殺はピタリと止まります。
- そもそも「どちらか一方」にだけマージンを付ける:
「上下にマージンを振る」のではなく、「全て下の要素にだけmargin-topを付ける」というルールを自分の中で決めておくと、計算が非常に楽になります。
最後に：つまずくのは、真剣に向き合っている証拠
HTMLやCSSの挙動は、最初は「なんでこうなるの！」とイライラすることもあるかもしれません。でも、今日こうして「マージンの相殺」という仕組みを知ったあなたは、もう一つ上のレベルにステップアップしました。
「おかしいな？」と思ったら、それはブラウザがルールに従って忠実に動いているだけ。そのルールを一つひとつ解き明かしていくのが、Web制作の醍醐味です。
また分からないことがあったら、いつでも聞きに来てくださいね。あなたのWeb制作ライフが、少しでも楽しく、軽やかになりますように！
コメント