【CSS】paddingとmarginの違いまとめ

paddingとmarginの違いについてまとめます。

概要

要素：文字列「サンプル」を例に説明します。

	padding	margin
直訳	詰め物	余白
距離感	要素に近い	要素に遠い
背景色	つく	つかない
ボーダー	内側	外側

イメージ図

marginだけの特性

• marginは相殺する場合がある。あるmargin:20pxの要素と次のmargin:20pxの要素が並ぶと、20pxの余白となる。margin:20pxとpadding:20px;なら40pxの余白になる。
• マイナスの値が使える。親要素からはみでることが可能。いわゆるネガティブマージン。一方、ネガディブパッディングない。
• プロパティにautoが使える。左右のmarginにautoを使うとブロック要素をセンタリングできる。
• widthに含まれます。ちなみにborderも含まれます。

まとめ

padingもmarginもtop,right,bottom,leftを個別に指定することも、まとめて書くこともできます。

まとめる場合は、トップから時計回りでプロパティを指定します。

個人的には省略せずにまとめて書いています。

例えばmarginを上下に10px、左右に20pxとする場合、省略すれば次のようにかけます。

ルールを忘れがちなので、あえて次のように書いてます。

 

paddingだっけ？marginだっけ？で悩んでいた人も、この機会に覚えてみてはいかがでしょうか。