ホームページ作り方[ボックスモデル]

要素は決められた寸法や位置に配置されます。要素はいつくかの領域から構成されていて、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;

[BOX2]背景色はパティング領域。パティングはコンテンツ領域の上下10ピクセル、左右20ピクセル。マージンはボーダー領域の上下左右50ピクセル。


[BOX3]
width:250px;height:150px; background: content-box green;padding: 10px; border: dashed red;

[BOX3]背景色はコンテンツ領域(パティング領域は無色)。パティングは上下左右10ピクセル。マージン無し。

MDN Web Docs

The World Wide Web Consortium