HTMLの要素を配置すると四角いボックスの領域が確保されます。この四角いコンテンツがある領域という意味で”content box”と呼びます。
CSSのプロパティを使うことでこのボックスにスタイル（装飾）をつけることができます。
- border プロパティ：
content boxの周囲に境界線をつける
この境界線までを含めたボックスをborder boxと呼ぶ - padding プロパティ：
borderの内側に余白を持たせる
この領域をpadding boxと呼ぶ - margin プロパティ：
borderの外側に余白を持たせる
他の要素との間に間隔を持たせるために使う
marginまでを含めた領域をmargin boxと呼ぶ
それぞれの領域を図で書くとこんな感じ
ブラウザが自動でつけるスタイルもある
例えば、HTMLの p にはスタイルを指定しなくてもブラウザがデフォルトでmarginをつけてくれるので、以下のように行間が空いたり見やすく整えられます。
自分でイチからスタイリングしたい場合は、こういったデフォルトのスタイルをリセットしておく。
こうすることで、デフォルトで設定されているmarginがなくなり、余白が０になる。
*p と body のそれぞれに margin: 0; をつけていることに注意
このボックスモデルはcssではよく出てくるので４つのボックスとこれらのプロパティの関係についてはしっかり理解しておきたいですね。