生成された矩形領域は、図のように content（内容領域）, padding（パディング）, border（ボーダー）, margin（マージン）の 4つの領域部分から成り立っています。
CSS では、ブロック要素・インライン要素を問わず、 その要素が生成する範囲をボックス（Box）と見立てています。 これをボックスモデル（Box model）と呼びます。ボックスの中の内容（コンテンツ）を内容領域と呼び、この部分が多くのプロパティの適用対象のベースとなります。さらにボックスは内容領域の他に、パディング（枠内余白）、ボーダー（外枠）、マージン（周辺余白）の 4つから構成されています。本文書では、ボックスモデル、及び包含ブロックの概念とボックスに関する "border-, border-color, border-style, border-width, height, margin, max-height, max-width, min-height, min-width, padding, width" の各プロパティを解説します。
詳細は、各プロパティを参照してください。なお、CSS3 では、border-styleプロパティで指定された枠線のスタイルの代わりに画像を用いる border-imageプロパティとボックスの角の形を四半円形にする角丸ボックスを作成するための border-radiusプロパティなどが追加される予定です。
ボックスモデル（Box model）とは、各要素が生成する矩形領域の範囲がボックス（Box）のように見立てられることから、そう呼ばれています。
生成された矩形領域は、図のように content（内容領域）, padding（パディング）, border（ボーダー）, margin（マージン）の 4つの領域部分から成り立っています。
つまり、border（ボーダー）の内側から内容の開始までの領域が padding（パディング）の領域で、 border（ボーダー）から外側が margin（マージン）の領域です。
さらに図の各領域に色が塗られているように、これら各領域において背景の反映が異なります。
ただし、ルート要素（最大の親要素のこと）の html要素と、その第一の子要素である body要素だけは例外で、border（ボーダー）領域を超え、さらに margin（マージン）領域までも背景に含んで計測されます。つまり、html要素と body要素に指定した場合は、表示域全体が背景の反映される対象となります。
また、ボックスモデルの概念図に、親要素の内容領域が図示されているように、（X）HTML文書内の各要素は、すべて樹形図のような構造（木構造・ツリー構造と呼ばれる）になっており、そこには必ず親要素や子孫要素が存在します。各要素、それぞれが矩形領域のボックスを生成しており、各要素のボックスは包含された形で包含ブロック（containing block）として機能しています。
包含ブロックとは、祖先要素のうち、もっとも近い祖先の要素にあたるブロック要素の内容領域を指します。つまり、当該要素の親要素をさかのぼっていっていってブロック要素があれば、そのブロック要素の内容領域が包含ブロックということになります。
CSS2.1 の仕様において包含ブロックは次のように定義されています。
relative | static" のどちらかである場合、包含ブロックはブロックレベル, セル要素, インライン・ブロックの最も近い祖先要素のボックスの内容辺（content edge）で形成される。position : fixed ;" と指定されている場合、包含ブロックは、連続メディアの表示域によって設定される。ページ付けメディアの場合はページボックスの表示域になる。
position : absolute ;" と指定されている場合、包含ブロックは、初期包含ブロック（initial contining block）を包含ブロックとする。ただし、祖先要素に positionプロパティの値が "absolute | relative | fixed" のいずれかである要素を持つ場合は、次の方法によって包含ブロックが決まる。
この定義を先の図に当てはめると、a要素や strong要素の包含ブロックは、p要素の内容領域、p要素の包含ブロックは、div要素の内容領域、div要素の包含ブロックは、body要素の内容領域ということになります。また、body要素は、ルート要素である html要素の矩形領域を包含ブロックとする初期包含ブロック（initial contining block）として機能します。通常、html要素, body要素に、ボックス関連プロパティの指定がなければ、各ブラウザの body要素の初期値である余白分を（Opera のみ body要素に初期値でパディングも指定されているので、Opera の場合はパディング分も）除いて、User-Agent（ユーザーエージェント）が表示するスクロール分も含めたページ全体が body要素の内容領域となります。しかし、html要素に対して widthプロパティ, heightプロパティに "auto" 以外を指定すれば、UA の表示する初期値ではなくなり、初期包含ブロック（html要素の矩形領域）の横幅・高さが指定されたことになり、body要素の内容領域もこれに準ずることになります。
また、div要素に "div { position : absolute ; }" の指定があり、div要素の親要素である body要素に対して位置指定されていないと仮定した場合、div要素は body要素の内容領域を包含ブロックに設定するのではなく、html要素の矩形領域である初期包含ブロックを包含ブロックとして設定します。これは、先の定義の「もし当該要素が "position : absolute ;" と指定されている場合、包含ブロックは、初期包含ブロック（initial contining block）を包含ブロックとする」に当てはまります。
こうして各要素に設定された包含ブロックは、各要素の生成するボックスの位置やサイズの多くの設定の基準値として参照されることになります。そもそも、包含ブロックは、CSS2 で positionプロパティが導入されたことにより、各設定の基準値の参照が複雑化し、内容を整理する為に定義されたものです。複雑な仕様ですが、CSS2.x を使いこなす上ではしっかりとその概念を理解しておかれることをお奨めします。