Margin を上に取るか下に取るか問題について考える

JetTheme に変えて、１つ気づいたことがあります。

要素の余白が基本的に margin-bottom で設計されている！！

これは意表を突かれました。これまで使っていた QooQ では、margin・padding ともに上下両方が使われていました。

JetTheme はブログ全体の骨組みはすでに完成されてるし、余白を調整したい部分は margin-bottom の値をちょろっと変えれば良いだけなので、基本的には問題ない。

ただ、微調整したい記事内の要素の余白、具体的には見出し、段落、リスト、画像、囲み枠... などの余白を調整するときに、margin-bottom だけの構成だと少し戸惑いがありました。

この記事では、margin のカスタマイズをしながら調べたことと、自分の検討結果をまとめてみたいと思います。

margin-bottom での余白指定は、もっとも一般的らしい

JetTheme のデフォルトでは、p タグ、ul タグ、ol タグ、li タグ、pre タグについては margin-bottom のみが設定されています。

JetTheme の導入直後は以前のブログの margin の値をとりあえず引き継いでいたため上下に margin がついた状態だったんですが、今回、余白をちゃんと設定しようと考えて、デフォルトが bottom ということでその値を調整することから始めてみたんです。

しかし、行き詰まりました。なんかうまくいかない。なんか、違う。こうじゃない。。。margin-bottom の値を変えるだけじゃ思い通りにならない。と思いました。

そこでふと、そもそも margin-bottom だけで余白を設定するって一般的なことなのか？ と思って調べてみました。すると、どうやらめちゃくちゃ一般的らしいです。

まったく知らない話でしたが、WEB 制作業界のなかでは margin を上と下のどっちに取るかというのは定期的に起こっている論争らしく、基本上派、基本下派などのポリシーが存在しているようす。

そして、基本下派というのは基本上派よりも多いらしい、というのが今回いろんな記事を読み漁って自分が感じた印象です。「基本」としているのは「基本的には下につけるが、場合によっては上も使う」という姿勢を表していて、100% 上か下だけで設計するのは無理という共通理解がある。

これまでのカスタマイズでは特にポリシーなどなく上下両方に margin をつけておくケースが多かった。段落もリストも、囲み枠も、全部そう。margin が相殺されるっていうことは知っていて、そのうえで、上下に設定しておけば何が隣り合っても必ずその margin 以上は発生するから、それで良いっていう認識でいました。

自分のブログカスタマイズではその運用でこれまで不都合はありませんでしたが、いろんな案件を扱うプロの間では、相殺前提で上下につけると一箇所の余白に対して２つの要素の設定を確認する必要があり、わかりにくくなるという認識があるようです。

確かに、それはある。それで、基本的には上か下かのどちらかで余白を取っていくことが好ましく、どっちが良いかで論争が起きるらしい。

margin-bottom が一般的な理由

margin-bottom がよく使われる理由としては、ウェブサイトは基本的に左上から下に下にと要素が敷き詰められていくため、余白は下側に取るのが自然、ということがあるようです。
※その他にもいろんな意見あり

また、margin-top に統一すると一番上にいきなり余白が生じるから不自然なため。
※他にもいろんな意見あり

いろんな意見を読みましたが、まぁどれも納得できるものです。

ちなみに、現在はどちら派でも :first-child や :last-child を使えば一番上・一番下の要素だけ余白を消すことはできます。IE 8 では :last-child が非対応だったため、IE 8 対応が主流だった頃は margin-top を使って :first-child で消すという方法が有効だったようです。（:first-child なら IE 8 も対応）

自分は、margin-top 派であることに気づいた

で。いろいろ調べて、margin は基本下派が多いらしいということや、各ポリシーの主張、その理由を理解しました。

そのうえで、記事内要素の余白に関して今回は top を基本に指定してみました。前述のとおり bottom の指定でやりにくさを感じていたためです。

結果、自分は margin-top のほうが使いやすいということに気づきました。え、こっちの方が思い通りになるじゃん！ と。基本上派で、たまに下も使う、というのが一番しっくりする形にできた。むやみに上下に指定するのはやめました。

margin-top が使いやすい理由

どうして margin-top のほうが使いやすく感じるんだろう。感覚人間なので言語化が難しいんですが、たぶん記事本文内ではどの要素がどういう順番で並ぶかが不確定であることに関係があると思います。要素 A と要素 B が縦に並ぶとき、その間の余白は上にある A じゃなく下に来る B の性質によって決めたい。

また今回調べる中で知りましたが、margin-top を基本にしてると隣接セレクタを活用できるのが便利。特定の要素、クラスが隣接したときだけ反映されるっていう指定方法で、基本は要素 B を margin-top:1rem とするけど、A と B が並んだときだけ B を margin-top:2rem にする、みたいな指定が可能になる。

これは margin-bottom だとできません。

隣接セレクタは、li タグの余白を調整するときなどにも使えるようで、li + li ｛margin-top:.5rem｝のようにすると、li と li の間だけ余白が設定される。:first-child や :last-child で最初や最後の余白を打ち消す必要がない。

margin-bottom を使いたいとき

こうして基本上派でいくことにしたんですが、margin-bottom を使いたいときも当然あります。

今回実施した余白カスタマイズの中で言うと、たとえば「装飾を施している囲み枠の中の p タグ や li タグ」に関しては margin-bottom を採用し、最後の余白だけ :last-child で消してみた。

その理由としては、

まぁ違和感を感じるのは CSS を書くときだけで、一度指定してしまえばあとはそんなこと意識することもないだろうから、時間が経ったらなんでこんな指定にしたんだろ？ って思ってしまうかもしれない。

隣接セレクタを使っても良かったんだけど、margin-bottom のほうが個人的にわかりやすかったので今回はそうしてみました。

他には、画像の下には次の要素に関わらず少し余白を多めに取りたかったので margin-bottom を設定。このくらいでしょうか。

さいごに

別に WEB 制作を仕事にしてるわけではないし、自分のブログをカスタマイズするっていうだけで margin 上派や下派を決める必要はないと思うし、別に混ぜこぜにしてたって上下に設定してたって見た目が大丈夫であれば、自分がよければそれで問題ないわけだから、そんなに大げさに考えなくて良いとも思います。今回は、いろいろ調べて自分の中でなるほど〜と思うことが多かったのでこうして記事にしてみました。

今回の余白カスタマイズの前後で見た目はほとんど変わっておらず自己満足的な部分もおおいにありますが、とりあえず上を基本としたことでこれまで相殺されていたような不要な margin の指定は減ったし、シンプルに上だけ考えれば良いっていう思考になって設定がしやすくなったと思います。

おわり。