CSSはレイアウトする文書が要素のツリーとしてモデル化されていると想定しています。 各要素には子要素の順序付きリストが0以上（要素の中に一つ以上のボックスがある、まったく無いなど）あり、リストの前、子要素内、リストの後にオプションの文字列があります。 親を持たない要素はルート要素と呼ばれます。

CSSは要素のツリーを（プロパティによってサイズと位置が指定された）長方形ボックスのツリーに変換することによって各要素や文字列がどのようにレイアウトされるか表現します。 長方形ボックスには、ブロックレベルボックス（段落のようなもの）やラインボックス（テキスト行のようなもの）、 インラインレベルボックス（行内の単語のようなもの）があります。

ブロックレベルボックスには他のブロックレベルボックスやラインボックスが含まれます。 ラインボックスには、インラインレベルのボックスが含まれます。 インラインレベルボックスにはより多くのインラインレベルボックスが散在したテキスト、 インライン化されたブロックレベルボックスを含めることができます。

図のようにボックスのツリーは要素のツリーを反映しています。 （青破線は上の p 要素、 赤破線は strong 要素、 緑破線は下の p 要素のボックス） 各要素は 0 以上のボックスに変換されます。 要素がルート要素でない場合、各ボックスは親ボックスの子か、要素自体の子です。 要素の数よりも多い、または少ないボックスが存在するかもしれませんが、各ボックスは正確に一つの要素に属します。

<ul>
 <li>１番目の項目
 <li>２番目の項目
</ul>

上記のHTMLの断片は、２つの li 要素のブロックレベルボックスを含んだ ul 要素のブロックレベルボックスを生成します。 li 要素のブロックレベルボックスは、それぞれが１つのラインボックス（1行のテキスト）を持っています。 そして、そのラインボックスには２つのインラインレベルボックスがあります。１つはリストマーカー、１つはテキストを含みます。 リストマーカーのインラインレベルボックスは文書には書かれていません。

狭いボックスの場合は、テキストが複数行になることもあるため、li 要素がさらに多くのボックスに変換されることもあります。

図のようにボックスにはパディング（padding/内側の余白）、ボーダー（border/枠線）、マージン（margin/外側の余白）があります。 プロパティによってそれぞれの太さ（厚さ）が決まります。（ 0 かもしれません） 各ボックスには内容領域（content area）があり、この領域を囲む四角形がコンテンツエッジ（content edge）です。 内容領域の周りにはパディング領域（padding area）があり、その外側にパディングエッジ（padding edge）、 パディングエッジの外側にボーダー領域（border area）があり、その外側はボーダーエッジ（border edge）、ボーダーエッジの外側にマージン領域（margin area）があり その外側はマージンエッジ（margin edge）と呼ばれます。

パディングやボーダーが無い場合はその太さが 0 であることを意味します。 マージンは負の太さを持つこともあります。（隣接するボックスを重ねる、など）

ラインボックスには、パディング、ボーダーまたはマージンを設定することはできませんので、 マージンエッジ、ボーダーエッジ、パディングエッジ、コンテンツエッジはすべて一致します。