「margin」「padding」のどちらを使いますか？

橋本 (2011年11月30日 11:56)
Webｺﾝｻﾙﾃｨﾝｸﾞ部 / HTML全般

こんにちは、デザイナーの橋本です。

CSSで余白や位置決めに、「margin」「padding」を使いますが、一見同じように見えていても、それぞれ他への影響が違っているので注意が必要です。

「margin」「padding」の違い（1）

左側のソース

top margin-bottom:20px
middle margin-bottom:20px
bottom margin-bottom:20px

右側のソース

top padding-bottom:20px
middle padding-bottom:20px
bottom padding-bottom:20px

「top」「middle」「bottom」のテキスト位置は同じですが、ボックスの扱いに違いがでますね。

「margin」「padding」の違い（2）

左のソース

box1
box2 margin: 20px;

中央のソース

box1
box2 padding: 20px

右のソース

box1 padding: 20px
box2

やはりそれぞれの「box2」のテキストの位置は同じですが、見え方に大きな違いが出ます。
これらを良く理解して使わないと、後でデザインが変更になった時等に他のスタイルも変更したり、一番避けたいHTMLの修正も必要になったりします。

CSSは色々な要素が重なりあうため、不具合があった時に原因を探るのが大変ですね。
例えば、「margin」はボックスの下にだけ使用する、上には使用しない等のルールを決め共有すれば、該当箇所を見つけやすくなります。

私たちは「ソースはシンプルに！」を心掛けてます。
シンプルなソースはメンテナンスのしやすさ、さらにページの読やすさ、そしてSEOへと繋がりますね。

システム開発のアイロベックスは、創業23年を迎える
プロフェッショナル集団です。