スタイルシートの勉強中、marginとpaddingどちらを使えばよいか悩んだので調べてみた。
marginとpaddingはどちらも要素の周りに余白を作るプロパティで、余白を要素の外側に作るか内側に作るかの違いだけで同じような事ができるように見える。
２つの違いについて調べてみると。
・marginの余白は、要素の外側に出来るためバッググランドカラーや壁紙が表示されません。(親要素を作って指定すれば関係無し)
・marginの設定した要素が「上下」で隣接すると、上下の余白は大きい値の方のみ採用されます。
例えば、上の要素が10pxの余白をセットして、下の要素が20pxの余白をセットした時、合計した30pxでは無く、値の大きい20pxの隙間ができます。
・paddingの余白は、要素とボーダーの間に余白を増やします。
勉強開始当初に勘違いしてたのはこの部分、DIVコンテナにwidth:100px;height:100px;にpadding:10px;をセットしたらDIVコンテナの内側に余白を作るのかと思っててコンテナの外枠は100*100pxのままで内側の使える領域が80x80pxになると思っていた。しかし実際にはコンテナの外枠が120x120pxになり内側の使える領域は100*100pxのままとなるので、外側にも内側にも思ったようなデザインにならず苦労したので注意してください。
結論から言えば、上記の要点を掴んでしっかり計算して作ればどちらでも問題ないようですが、混ぜて使うと計算が面倒なのでどちらか一方をメインに使ったほうがよさそうです。
色々なサイトを見てるとmarginを使っている人が多いように思います。
Tableタグのようなボーダー線とで表を作るならPaddingしかない。（DIVを二重に使えばPaddingを使わなくてもできます）