margin相殺の策定理由の考察
Webデザイン初学者殺しのmargin相殺(Collapsing margins)。
ブロックレベル要素の外側の余白であるmarginには「上下のmarginが隣接する場合は長いほうに決まる」という謎仕様があります。
ブロック要素の上下のmarginが計算通りに効かない、p要素をdiv要素で括ると変な余白が出る…などなど、これまで世界中のコーダーの皆様から、数え切れない嘆きと悲しみと疑問の声が上がってきたものと想像します。
インターネット上で調べてみても「margin相殺とかいうクソ仕様注意！解決方法はこちら！」みたいな論調のページがほとんどです。
今回はそんなmargin相殺に焦点を当て、そもそもなぜmargin相殺が必要とされたのか、なぜそのような仕様が策定されたか、についてまとめてみました。
その前に、margin相殺の発生状況と解決策について、おさらいしたい方はこちらを総復習。
結論
Webブラウザの横組み組版上で、段落(p要素)の上下marginを簡単かつ均等に設定できるから。
1.W3Cの仕様書の確認
World Wide Web Consortium(W3C)の仕様書を探してみると、CSS level2の時点で設定されていました。
ボックスモデルの項の中に、marginの仕様の別項目として、margin相殺が発生する条件を挙げられています。
https://www.w3.org/TR/CSS2/box.html#collapsing-margins
ブラウザやCSSのバグではなく、完全に仕様として意図して盛り込まれているのがわかります。
では、なぜ上下marginはpaddingのように素直に加算しないのか？
なぜ別項を使ってまで「ブロックレベル要素の上下marginを相殺し長い方にまとめる」ような謎仕様が作られたのでしょうか？
まずは仕様が作られた時代背景から考えてみましょう。
2.考察
CSS level 2が策定された時期は1998年5月。
インターネットの情報の主役はテキストでした。
FlexboxやCSS Gridは影も形もなく、横並びのレイアウトはfloatを使って擬似的に並べるのが主流でした。(懐かしいですね)
・当時のページ内の要素の多くは、テキストのまとまりであるp要素。
・margin相殺の条件が「ブロックレベル要素が積み重なった状態の上下余白」である事。
以上を踏まえると、margin相殺は「p要素」をターゲットにした余白の処理を目的としている、と思われます。
3.検証
実際にレイアウトを組みながら見てみましょう。
Wikipediaの鹿苑寺から、テキストと画像を入れています。
テキストは2~3行ごとにp要素で囲っています。(line-heightは1にしています)
p要素の上下の余白は無く、すべて詰まって見えますね。
次に、p{margin-top:20px;}を付加して、p要素の上側にだけmarginを指定してみます。
文章の上側に余白が生まれ、見やすくなりました。
上側にしか余白をつけていないので、文章下部に画像を挿入している間の余白や、最後の文章には余白が生まれません。
次にp{margin-top:20px; margin-bottom:20px;}を入れて、上下marginの余白を20pxにします。
ここでmargin相殺が機能する事により、文章と文章の間の上下の余白は40pxにはならず、20pxになります。
p要素にスタイルを設定するだけで、文章周辺の余白が均一に揃いましたね。
では、もしmargin相殺が無かったらこのようになります。
赤矢印の部分、p要素とp要素の間の余白だけは合算され40px開いてしまいます。
もしmargin相殺が無い状態で、p要素付近の余白を均一に揃える場合、
・p要素の上下のどちらかにmarginを設定
・p要素同士が隣接しないp要素にはclass/idを付加してmarginを個別に設定
という周辺の要素に応じたスタイル付けが必要になります。
文章を編集する側は地獄ですね。
margin相殺があるおかげで、ページ内のテキストは段落ごとに<p>と</p>で囲うだけでキレイに揃うようになるのです。
4.まとめ
インターネットの情報の中で、最も基本的なまとまりである「p要素」。
ページをp要素が積み重ねで構成していく上で、どうしてもバラつきが出てしまう…最初/最後のテキストに別スタイル指定をしなくては行間がキレイに揃わない…そんな不都合を一発で解決するため、margin相殺は必要に応じて生み出された仕様だったのではないでしょうか。
また、margin相殺の使い方さえ押さえておけば「p要素の上下marginを設定しておくだけで基本的な組版が整う」という、今でも使えるテクニックとして活かせるようにもなります。(トップ画像の伏線回収です)
5.あとがき
W3Cの中の人とか、詳しい人がいたら教えてください。
見当違い、ツッコミどころ、間違いがあれば何なりとご教授ください。