【CSS】paddingとmarginの違いを超絶シンプルに解説

CSS

paddingとmargin、どちらも余白を表しますが、その違いについて解説します。

paddingとmarginの違い

ズバリ言うと、ボーダーの内側に入るのがpadding、外側に出るのがmarginです。

また、背景色を指定したときに色がつくのがpadding、つかないのがmarginです。

なので、ボーダーと背景色がない場合はpaddingとmargin、どっちを指定してもいいことが多いです。

図で解説

padding
margin

ボーダーの内側のpaddingには色がついて、外側のmarginには色がついていません。

padding
margin

ボーダーと背景色がない場合は、paddingとmarginで見た目は変わりませんね。

margin
margin

注意点として、marginが隣り合うときは、marginの相殺が起こります。

1つ目の要素も2つ目の要素もmargin: 30px;なので、要素の間に60pxのスキマができそうですが、そうなっていません。片方の30pxだけが適用されているのが分かります。

これがmarginの相殺で、marginが隣り合うときは、大きい方のmarginだけが適用されます。

40pxと70pxだったら、70pxのほうが適用されるということですね。

※フレックスボックスの場合はmarginの相殺は起こりません。