CSS: ボックスモデルについて

CSSでは「ボックス」という概念が重要になってきます。 それぞれの要素が「ボックス」と呼ばれる四角の領域を生成します。

ボックスの構成要素は4つあり、「内容領域」、 「パディング」、「ボーダー」、「マージン」から 構成されています。

ボックスと4つの構成要素を図で表すと次のようになります。

ボックスモデル
内容領域
テキストや画像等、要素内容が表示される領域。 width プロパティheight プロパティで指定された幅と高さは、 この内容領域の幅と高さになります。
但し、「box-sizing プロパティ」に「border-box」を指定した場合は、内容領域ではなく、 ボーダーまでの領域が幅と高さになります。
パディング
内容領域とボーダーの間の領域。背景色や背景画像はパディング部分にも適用されます。
ボーダー
要素周りの領域で、内容領域とパディングの外側になります。 背景色や背景画像はボーダー部分にも適用されます。
マージン
ボーダーの外側の領域。背景色や背景画像はマージン部分には適用されません
HTML・CSS入門