marginとpaddingの使い分け【CSS】
公開日：marginとpaddingってどうやって使い分ければいいの？
なんだかんだ言ってほとんど同じじゃん。
そう思っているあなたに、コーダーの僕の経験から言えることをお話しします。
大まかな使い分け
おおまかに言うと以下。
- padding
-
親子間の余白
- margin
-
隣接する要素間の余白
もちろん例外もありますが、大体はこれを基本に使い分けています。
といってもイメージしにくいと思うので画像をご覧ください。
親子間でpaddingを使う理由
親子間でmarginを使っていると場合によって子要素のmarginが親要素からはみ出して適用されることがあります。
「場合によって」というのがどういうことかというと、基本的にははみ出すのですが、
- 親要素に
margin、padding、borderが設定されるとはみ出さなくなる - 親要素に
overflow: hiddenが設定されるとはみ出さなくなる
上記の場合に、はみ出さなくなるのです。
この変化が起こった場合、もし、親要素に背景色などが設定されていると、その範囲が変わってしまうなどの問題が起こります。
どんな修正が後から必要になってくるかわかりませんから、こういう 意図せず変化してしまう要因 や 余計な制約を加える要因 はなるべく取り除きましょう。
隣接する要素間でmarginを使う理由
paddingは要素の内側に確保される余白なので、もしpaddingで隣接する要素間の余白を取った場合、背景やボーダーがつながってしまい、見た目がおかしくなりますよね。
仮に、その時点でボーダーや背景が必要ないとしても、今後どんな変更があるかわからないので、変更する際に余計な手間が増えるようなコーディングはいいとは言えません。
ちなみに、topかbottom、leftかrightのどちらを使うべきかという問題に対しては、どのようにしていますか？
僕はtopとleftを使うようにしています。その理由ですが、
- 要素が1つだったら余白はなし。
- 要素が複数だったら、2つ目以降の手前に余白
というように、1つでも複数でも同じルールが適用できるからです。
これも変更のしやすさにつながります。
例外
基本的には上記のルールで設定しますが、例外があります。
それは、margin-autoで中央寄せしたい場合です。
要素にmax-widthなどが指定されていて、中央に寄せたい場合は、遠慮なくmarginを使います。
無理にmargin以外の方法で中央寄せすると逆に工数がかさんで、読みにくいコードになるでしょう。
まとめ
基本的にこのルールで統一していれば、美しいコードになるかなと思います。
CSSのプロパティの特性や、各主要ブラウザの対応やバグを理解した上でよりよいコーディングを目指しましょう！
