paddingとmarginの使い分け

Question

スクラッチでcssが出来るために勉強しているビギナーです。

質問なのですが、配置や見た目が同じ場合に、paddingとmarginは、どうやって使い分けていますか？

paddingはelementのbackground-colorが反映される、縦方向のmarginは相殺される等は、わかりましたが、見た目及び配置が両者を使って同じ場合には、何を基準に使い分けているのですか？

初歩的な質問ですが、よろしくお願いいたします！

Answer 1

段ボール箱の例で感覚的に言うなら、
marginはどれくらいの余裕をもって段ボールを並べるか、
paddingは段ボール箱の中のクッション材(新聞紙なんかつめたりする)みたいなものです。

Answer 2

paddingは「要素の内側」、marginは「要素の外側」の余白であるので、
まずはそれぞれの役割に応じて使い分けるのが前提ですが、
配置も見た目も同じケースの場合には原則として私はmarginから先に使います。
paddingの場合width/heightなどのボックスサイズ計算に含める／含めないといった問題が生じますが、
marginであればボックスのサイズ計算には無関係なのでそのあたりを気にする必要がありませんので。

もしmarginでは不都合が生じる、またはpaddingにした方が明らかなメリットがある、
というケースであればpaddingを使うこともありますが、
どちらでも見た目が再現できるなら基本はmargin→paddingの順で設定してます。
（あくまで個人の見解です）

Comments

[johnbeetz]

皆様、回答ありがとうございました！
>>marginであればボックスのサイズ計算には無関係なのでそのあたりを気にする必要がありませんので。

なるほど！paddingだと逆算してボックスの大きさを図るのが面倒だからですかね？
ありがとうございました！

Answer 3

ボーダーを引いてみれば一目瞭然で、borderはpaddingの外側、marginの内側に入ります。

ということで、paddingは「要素に属する」空白、marginは「要素と要素の間」という意味的な違いが明確にあります。