要素は決められた寸法や位置に配置されます。要素はいつくかの領域から構成されていて、CSSでそれを規定できます。
コンテンツ領域
文字や画像などの領域。領域の幅と高さはコンテンツの大きさに依存。box-sizing プロパティで要素の幅と高さをどのようにするのかを記述します。要素がブロック要素である場合は、 width、 min-width、 max-width、 height、 min-height、 max-height の各プロパティで個別に記述できます。
パティング領域
コンテンツ領域の周りにパティングを含めた領域。paddingプロパティで一括指定するか、padding-top、 padding-right、 padding-bottom、 padding-left の各プロパティで個別に記述します。
ボーダー領域
パディング領域の周りにボーダーを含めた領域。borderプロパティで一括設定するか、border-widthプロパティでボーダー幅を記述します。
マージン領域
ボーダー領域の周りに空の領域を含めた領域。marginプロパティで一括設定するかmargin-top、 margin-right、 margin-bottom、 margin-left の各プロパティで個別に記述します。
[BOX1]の中に[BOX2]と[BOX3]を配置してそれぞれパディング・ボーダー・マージンを設定してみます。
[BOX1]width:600px; height:600px; background: white; border: solid;
[BOX2]
width:150px; height:250px; background: padding-box green; padding: 10px 20px; margin: 50px; border: ridge;
width:150px; height:250px; background: padding-box green; padding: 10px 20px; margin: 50px; border: ridge;
[BOX2]背景色はパティング領域。パティングはコンテンツ領域の上下１０ピクセル、左右２０ピクセル。マージンはボーダー領域の上下左右５０ピクセル。
[BOX3]
width:250px;height:150px; background: content-box green;padding: 10px; border: dashed red;
width:250px;height:150px; background: content-box green;padding: 10px; border: dashed red;
[BOX3]背景色はコンテンツ領域（パティング領域は無色）。パティングは上下左右１０ピクセル。マージン無し。