CSSの相殺性理論

尊敬すべき人物の1人にアインシュタインと言っている、ユゲタです。 そんなアインシュタインの「相対性理論」とは全く異なる「CSSの相殺性理論」というのを検証してみたくなりました。 「marginの相殺」というのは、cssをやっていると聞いたことがあると思いますが、paddingとの関わり方や、 innerサイズとの影響など、個人的に気になっている点がいくつかあるので、それらをちゃんと理解して自己満足したいな〜というブログ記事にしたいと思います。 「知っとるがな！」と言う人は、是非、ここから先を読まずに、お引取りください。 ちなみに、。「相殺」は、英語に直訳すると「offset」です。

比較的有名なMargin相殺

CSSの基本として知っていないと大怪我をするmargin相殺をおさらいしておきたいと思います。 まず、そもそもma-gin相殺って何か？というと、

margin相殺について

HTML構造で兄弟要素の上下構造の場合に、margin-topとmargin-bottomは、足した値ではなく、どちらか大きい値のみが採用さ、小さい値は除外される結果になる。 上記は、青色の下のエレメントを、transformで横にずらしてわかりやすく相殺されている様子を表している図です。 でも、何故か、左右に対しては、相殺されません。 あと、親要素にborderとpaddingが0サイズの時に、親要素のmarginも相殺されてしまう。 少しわかりにくいですが、本来marginの外側に青色背景が着くトコロが、下位層のmargin分親要素のmarginとなっていることが確認できます。

paddingは相殺されないのか？

どうやら、paddingは、相殺対象に入らないようですね。 marginのみの相殺性理論のようなので、webサイトのデザインをする時に、 このトラップにはまらないように十分注意をしましょう。

未来への対応

そして、今後未来的に、この相殺方式が不具合として考えられるとも思えるので、 相殺方式が廃止された時に、これまでの理論がガタ崩れしてしまいます。 そうならないために、相殺が起こらないように、borderやpaddingを必ず組み込むようにしたり、 marginに頼らない方式で、UI構築をしておくというのも、 未来への投資活動になるかもしれませんね。 何よりこの「相殺性理論」によって、費やす時間短縮になりますので、「marginは今後使わない！」はまあまあ悪くないコーディングルールかもしれませんね。 少なくとも、ユゲタはこのブログを書いた直後から、その方式でしばらく仕事をしてみたいと思いました。