marginとpaddingはどちらも余白をとるプロパティ

cssで、余白をとるためのプロパティは2つあります。margin（マージン）とpadding（パディング）です。

なぜ2つあるのか。余白のとり方が違うんですね。これについて、このあと説明します。

その前に使い方の整理

marginもpaddingも、leftとかbottomとかと組み合わせて、どの方向に余白をとるのか指定します。

div.box {
 margin-left : 20px;
 padding-bottom : 50px;
}

上記は、boxというclass名のついたdivに、左側のmarginを20px、下側のpaddingを50px とるよ、という指定です。

ちなみに

div.box {
 margin : 20px;
}

こう書くと、div.boxに対して、上右下左方向にそれぞれ20pxのmarginをとります。

さらに

div.box {
 margin : 20px 30px 10px 40px;
}

これだと、左から順に上margin、右margin、下margin、左margin という指定になります。

CSSのボックスモデルを図解

さて本題。

marginもpaddingも、余白をとるためのプロパティで、役割は似ているんですが、機能は明確に異なります。どの部分に余白をとるか、が異なっています。

CSSには、ボックスモデル、という概念があります。

・

HTMLのブロック要素、divでもpでもliでもなんでもいいですが、そういう要素は、必ず四角い形をしています。

<div>私は蝶。</div> このdivは、範囲を可視化すると四角なんです。こんな具合に。

あ、ちょっと角が丸くなっちゃいました。それはこのページのCSSで、border-radiusを指定しているからです、お気になさらず

・

で、この四角いブロック要素の構成がどうなってるか、というのを見るのがボックスモデルです。

例えばこんな感じになっています。

この図を見ると直感的にわかっていただけると思うのですが、paddingは内側の余白、marginは外側の余白ということになります。

なんの内側、外側か、というと、「borderの」です。borderとは境界線・枠線のことですね。

ちなみに、上のボックスにはグレーの背景色がついていますが、これも内側です。背景色は、borderの内側につきます。

つまり、枠線や背景の中の余白はpadding、その外側の余白はmarginでとりましょう ということです。