CSS

ボックスモデル

　CSSの基本的な概念のひとつである「ボックスモデル」（box model）について見ていきます。

　CSSでは、それぞれの要素について生成される四角形の領域の事を「ボックス」と表現する。ボックスは、以下の４つの領域から構成される。

　各領域の境界線は「辺」（edge）と表現される。

　これらの領域はそれぞれ、上（top）、下（bottom）、左（left）、右（right）の４辺に分解する事が出来る。CSSでは４辺ごとに個別のスタイルを設定する事が可能である。

　上図からもわかるとおり、ボックスの幅と高さは、以下のように計算されることになる。

ボックスの幅＝左右のマージン＋左右のボーダー＋左右のパディング＋内容領域の幅

ボックスの高さ＝上下のマージン＋上下のボーダー＋上下のパディング＋内容領域の高さ

　ボックスモデルと背景の関係について説明しよう。要素に背景を設定した場合、パディングとボーダーの領域まで適用されるが、マージンの領域には適用されない。

　このように、マージンの領域では背景は常に透過（transparent）され、親要素（親ボックス）で設定されている背景に依存する事になる。ボーダーの領域では、ボーダー関連プロパティで指定したスタイルが、背景の上に重ねて描写される。

　サイトによっては、heightプロパティと widthプロパティが paddingを含むとの記載があったので、検証してみました。

　一般的なボックスモデルのイメージは下図のようになると思います。

　そして、SVGを使って、width:10px, height:100px の四角形を表示して、paddingプロパティの余白の付き方を確認してみました。

content

HTML

<p>
	<svg width="10px" height="100px">
		<rect width="10px" height="100px" fill="#5d5d5d" />
	</svg>
	content
</p>

CSS

p {
	padding: 10px;
	background-color: #999999;
	height: 100px;
	border: solid 10px #006600;
}

　これの数値を変更したりして検証してみた結果、heightプロパティには「paddingは含まない」ことが確認できました。よって、widthプロパティにも paddingは含まないと推測できます。