marginの相殺＆なぜそんな仕様が存在するのか？
HTML/CSSの基礎固めで、
いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)
- 作者: 狩野祐東
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2016/10/27
- メディア: 単行本
- この商品を含むブログ (1件) を見る
「marginの相殺」
という謎概念に遭遇。
確かにマージンが謎にはみ出る現象は見たことがある。
こいつが原因か？
- 「marginの相殺」とは一体？
- なぜこんな仕様が存在するんだ？
というテーマで調査開始！
結論
最初に結論だけ整理。
- marginは上下がくっつくことがある。
- この際2つのmarginの内、大きい方が1つのマージンとして採用される。
- これを「marginの相殺」と呼ぶ
- 「marginの相殺」を使うと、記述を簡潔にできることがある、らしい。
以下詳細。
marginの相殺とは？
まずは概要の調査。
いちばんオススメの記事
個人的にはいちばん分かりやすかった。 以下の文が「marginの相殺」を一番端的に表していそう。
マージンの相殺は、垂直マージンを指定した2つのブロックレベル要素が並んだ時に起こります。マージンの相殺が起こると、2つのマージンのうち大きい方（等しい場合はいずれか）が1つのマージンとしてみなされます。
例外について
www.tam-tam.co.jp siqpress.com
「marginの相殺」にはいくつか例外がある。
つまりある条件に合致すると、「marginの相殺」は起きない。
この条件が結構複雑で分かりにくい。。。 が、上の記事を読むと、割と理解できる。
margin = 心の距離説
相殺を理解するには、要素を人に例えるとわかりやすいかもしれません。
widthは、骨格 heightは、身長 borderは、皮膚 paddingは、脂肪 marginは、心の距離 脂肪(padding)だと、物理的な距離となります。
これが心の距離(margin)の場合は、Aさんの心の距離が1。 ただしBさんのAさんのことを、それほど想っておらず、心の距離は3だとします。 Aさんは心が縮まっていると思っていても、AさんとBさんの心の距離を客観的に見ると、実際の心の距離は3となります。
marginは、他のCSS ボックスモデルの要素とはちょっと扱いが違うらしい。
そのあたりを端的に表現しているのが上の記事。
例えが心をえぐるけれども(涙)
なぜ「Marginのたたみ込み(相殺)」が存在するのか？
結論から言うと、
この仕様があった方が簡潔に書けるから。
の様子。
margin の相殺は何のためにあるのでしょうか？(yahoo知恵袋の記事)
理由は記述を簡潔にするためです。
(中略)
[質問]nth-last-childとかlastクラスの追加とかをしなくても良いというメリットでそういう仕様になっているのですね？
(中略)
その通りです。nth系の仕様が出てきたのは後になってからですし、仕様を策定する様な人達は原理主義的なところがあって、同種の要素は同じスタイルを適用するのが良いと考えたのだと思われます。
yahoo 知恵袋の回答(裏が取りにくい)で申し訳ないのだけれど、
日本語でシンプルにこの問いに答えているのは、
これしか見つからなかった。
CSS： marginの正しい理解 (CSSのmarginが難しい)
トリッキーすぎて、初学者に「バグじゃないの？」と思われることも、しばしばです。
しかしmarginの相殺を理解することで、marginの単一方向の指定や、paddingを使用するよりも、HTML, CSSをクリーンに書ける場合も多くあります。
こちらもやはり、簡潔に書けることをメリットとして挙げている。
がどうも歯切れが悪いと言うか、
擁護してる感が否めない。
まとめ
「marginの相殺」については何となく理解したが、
正直、" なぜ「marginの相殺」が存在するんだ？"に関してはイマイチ情報が見つからなかった。
もしかする自明な内容で、私の経験が不足しているだけなのかも？
今後実務の中で意識していくかな。
