CSSボックスモデルは，文書ツリーの要素に対して生成される長方形のボックスを記述し，視覚フォーマットモデルに従って拡張する。ページボックスは，特殊なボックスであって，ページ付けしたメディアの箇所で詳細を記述する。
各ボックスは，テキスト，画像などの内容領域をもち，オプションで，その周囲にパディング，境界及びマージンの領域をもつ。各領域のサイズは，以降で定義される特性によって指定される。次の図は，これらの領域がどのように関係しているか，並びにマージン，境界及びパディングの断片を参照するために使用する用語を示す。
マージン，境界及びパディングは，左部，右部，上部及び下部に分けることができる。例えば，図では，左マージンは"LM"，右パディングは"RP"，上境界は"TB"などとなっている。
四つの領域(内容，パディング，境界及びマージン)の各周辺を"辺"と呼ぶ。そこで，各ボックスには四つの辺をもつ。
各辺は，左辺，右辺，上辺及び下辺に分かれる。
ボックスの内容領域の寸法，すなわち内容の幅及び内容の高さは，複数の要因に依存する。ここで複数の要因とは，ボックスを生成する要素が'width'特性集合又は'height'特性集合をもつかどうか，ボックスがテキスト又はその他のボックスを含んでいるかどうか，ボックスが表であるかどうかなどとする。ボックスの幅及び高さは，視覚フォーマットモデルの詳細で示す。
ボックス幅は，左マージン及び右マージン，境界，パディング並びに内容幅の合計によって与えられる。高さは，上マージン及び下マージン，境界，パディング並びに内容の高さの合計によって与えられる。
ボックスの様々な領域の背景スタイルは，次のとおりに決定される。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Examples of margins, padding, and borders</TITLE>
<STYLE type="text/css">
UL {
background: green;
margin: 12px 12px 12px 12px;
padding: 3px 3px 3px 3px;
/* No borders set */
}
LI {
color: black; /* text color is black */
background: gray; /* Content, padding will be gray */
margin: 12px 12px 12px 12px;
padding: 12px 0px 12px 12px; /* Note 0px padding right */
list-style: none /* no glyphs before a list item */
/* No borders set */
}
LI.withborder {
border-style: dashed;
border-width: medium; /* sets border width on all sides */
border-color: black;
}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>First element of list
<LI class="withborder">Second element of list is longer
to illustrate wrapping.
</UL>
</BODY>
</HTML>
このHTML文書例は，(他の関係の間で，)二つのLIを子供とするUL要素をもった文書ツリーを生じる。
次の最初の図は，この例が何を生成するかを示している。2番目の図は，UL要素のマージン，パディング及び境界と，その子供であるLI要素のマージン，パディング及び境界との関係を示している。
次に注意することを示す。
マージン特性は，ボックスのマージン領域の幅を指定する。'margin'簡略記述特性は，上下左右のマージンをすべて設定するが，その他のマージン特性は，上下左右のマージンを個々に設定する。
ここで定義される特性は，<margin-width>値型を参照し, 次の値のうちいずれか一つをとってもよい。
マージン特性に対して，負の値は許されるが，実装固有の制限が存在してもよい。
| 値: | <margin-width> | inherit |
| 初期値: | 0 |
| 適用対象: | すべての要素 |
| 継承: | しない |
| パーセント値: | 包含ブロックの幅を参照する |
| メディア: | 視覚メディア |
これらの特性は，ボックスの上マージン，右マージン，下マージン及び左マージンを設定する。
H1 { margin-top: 2em }
| 値: | <margin-width>{1,4} | inherit |
| 初期値: | 簡略記述特性には定義されない |
| 適用対象: | すべての要素 |
| 継承: | しない |
| パーセント値: | 包含ブロックの幅を参照する |
| メディア: | 視覚メディア |
'margin'特性は，'margin-top'，'margin-right'，'margin-bottom'及び 'margin-left'をスタイルシートの同じ位置で設定するための簡略記述特性とする。
値がただ一つだけ存在する場合は，上下左右のすべてのマージンにそれを適用する。値が二つ存在する場合は，上下マージンに最初の値を設定し，左右マージンに2番目の値を設定する。値が三つ存在する場合は，上マージンに最初の値を設定し，左右マージンに2番目の値を設定し，下マージンに3番目の値を設定する。値が四つ存在する場合は，上マージン，右マージン，下マージン及び左マージンにそれぞれを適用する。
BODY { margin: 2em } /* all margins set to 2em */
BODY { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */
BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
この例の最後の規則は，次の例と同等とする。
BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* copied from opposite side (right) */
}
この標準情報(TR)では, マージンのつぶしという表現は，二つ以上のボックスの(パディング領域又は境界領域によって分離されていない)隣接マージンが，結合して単一のマージンを形成するという意味とする。ただし，この場合の二つ以上のボックスは，互いに隣接するか，又は入れ子になっていてもよい。
CSS2では, 左右マージンはつぶされない。
上下マージンは，次の一定のボックス間でつぶされてもよい。
つぶされたマージンの図については，マージン，パディング及び境界の例を参照すること。
パディング特性は，ボックスのパディング領域の幅を指定する。'padding'簡略記述特性は，上下左右のパディングをすべて設定するが，その他のパディング特性は，パディングを各サイドだけに設定する。
ここで定義される特性は，<padding-width>値型を参照し, 次の値の一つをとってよい。
マージン特性とは異なり, パディング値は，負とすることはできない。マージン特性と同様に，パディング特性のパーセント値は，生成されるボックスの包含ブロックの幅を参照する。
| 値: | <padding-width> | inherit |
| 初期値: | 0 |
| 適用対象: | すべての要素 |
| 継承: | しない |
| パーセント値: | 包含ブロックの幅を参照する |
| メディア: | 視覚メディア |
これらの特性は，ボックスの上パディング，右パディング，下パディング及び左パディングを設定する。
BLOCKQUOTE { padding-top: 0.3em }
| 値: | <padding-width>{1,4} | inherit |
| 初期値: | 簡略記述特性には定義されない |
| 適用対象: | すべての要素 |
| 継承: | しない |
| パーセント値: | 包含ブロックの幅を参照する |
| メディア: | 視覚メディア |
'padding'特性は，'padding-top'，'padding-right'，'padding-bottom'及び'padding-left'をスタイルシートの同じ位置で設定するための簡略記述特性とする。
値が一つだけ存在する場合は, 上下左右パディングのすべてにそれを適用する。値が二つ存在する場合は，上下パディングに最初の値を設定し，左右パディングに2番目の値を設定する。値が三つ存在する場合は，上パディングに最初の値を，左右パディングに2番目の値を，下パディングに3番目の値をそれぞれ設定する。値が四つ存在する場合は，右パディング，右パディング，下パディング及び左パディングにそれぞれを適用する。
パディング領域における面の色又は画像は，'background'特性を介して指定される。
H1 {
background: white;
padding: 1em 2em;
}
この例では，上下パディング('padding-top'及び'padding-bottom')は'1em'に指定され，左右パディング('padding-right'及び'padding-left')は'2em'に指定されている。'em'単位は，要素のフォントサイズに相対的とする。'1em'は使用されるフォントのサイズに等しい。
境界特性は，ボックスの境界領域の幅，色及びスタイルを指定する。これらの特性は，すべての要素に適用される。
備考 特にHTMLの場合は，利用者エージェントは，"通常の"要素とは異なるボタン，メニューなどの一定の要素に対して境界をレンダリングしてもよい。
境界幅特性は境界領域の幅を指定する。ここで定義される特性は，<border-width>値型を参照し, 次の値の一つをとってよい。
最初の三つの値の解釈は，利用者エージェントに依存する。しかし，次の関係は維持されなければならない。
'thin' <='medium' <= 'thick'.
さらに, これらの幅は文書を通して一定でなければならない。
| 値: | <border-width> | inherit |
| 初期値: | 中間の太さ |
| 適用対象: | すべての要素 |
| 継承: | しない |
| パーセント値: | N/A |
| メディア: | 視覚メディア |
これらの特性は，ボックスの上境界，右境界，下境界及び左境界を設定する。
| 値: | <border-width>{1,4} | inherit |
| 初期値: | 個々の特性を参照 |
| 適用対象: | すべての要素 |
| 継承: | しない |
| パーセント値: | N/A |
| メディア: | 視覚メディア |
この特性は，'border-top-width'，'border-right-width'，'border-bottom-width'及び'border-left-width'をスタイルシートの同じ位置に設定するための簡略記述特性とする。
値が一つだけ存在する場合は，上下左右の境界すべてにそれを適用する。値が二つ存在する場合は，上下境界に最初の値を設定し，左右境界に2番目の値を設定する。値が三つ存在する場合は，上境界に最初の値を，左右境界に2番目の値を，下境界に3番目の値をそれぞれ設定する。値が四つ存在する場合は，上境界，右境界，下境界及び左境界にそれぞれを適用する。
次の例では，コメントが，上境界，右境界，下境界及び左境界の結果として生じる幅を示す。
H1 { border-width: thin } /* thin thin thin thin */
H1 { border-width: thin thick } /* thin thick thin thick */
H1 { border-width: thin thick medium } /* thin thick medium thick */
境界色特性は，ボックスの境界の色を指定する。
| 値: | <color> | inherit |
| 初期値: | 'color' 特性の値 |
| 適用対象: | すべての要素 |
| 継承: | しない |
| パーセント値: | N/A |
| メディア: | 視覚メディア |
| 値: | <color>{1,4} | transparent | inherit |
| 初期値: | 個々の特性を参照 |
| 適用対象: | すべての要素 |
| 継承: | しない |
| パーセント値: | N/A |
| メディア: | 視覚メディア |
'border-color'特性は，上下左右の境界の色を設定する。値は次の意味をもつ。
'border-color'特性は一つから四つまでの値をもつことができ，値は'border-width'の場合と同様に上下左右に設定される。
要素の境界色が境界特性を用いて指定されない場合は，利用者エージェントは，要素の'color'特性の値を境界色の計算値として使用しなければならない。
次の例では, 境界は黒い実線となる。
P {
color: black;
background: white;
border: solid;
}
境界スタイル特性は，実線，二重線，破線などのボックスの境界の線種を指定する。ここで定義される特性は，<border-style>値型を参照し，次の一つをとってよい。
すべての境界は，ボックスの背景の上に描写される。'groove'，'ridge'，'inset'及び'outset'という値に対して描かれる境界の色は，要素の'color'特性に依存する。
適合するHTML利用者エージェントは，'dotted'，'dashed'，'double'，'groove'，'ridge'，'inset'及び'outset'を'solid'と解釈してもよい。
| 値: | <border-style> | inherit |
| 初期値: | none |
| 適用対象: | すべての要素 |
| 継承: | しない |
| パーセント値: | N/A |
| メディア: | 視覚メディア |
| 値: | <border-style>{1,4} | inherit |
| 初期値: | 個々の特性を参照 |
| 適用対象: | すべての要素 |
| 継承: | しない |
| パーセント値: | N/A |
| メディア: | 視覚メディア |
'border-style'特性は，上下左右の境界のスタイルを設定する。この特性は一つから四つの値をもつことができ，8.5.1の'border-width'と同様に，値は上下左右に設定される。
#xy34 { border-style: solid dotted }
この例では, 左右境界は'solid'となっており，上下境界は'dotted'となる。
境界スタイルの初期値は'none'なので，境界スタイルが設定されていない場合は，境界は見えない。
| 値: | [ <'border-top-width'> || <'border-style'> || <color> ] | inherit |
| 初期値: | 個々の特性を参照 |
| 適用対象: | すべての要素 |
| 継承: | しない |
| パーセント値: | N/A |
| メディア: | 視覚メディア |
これは，ボックスの上境界，右境界，下境界及び左境界の，幅，スタイル及び色の設定を目的とする簡略記述特性とする。
H1 { border-bottom: thick solid red }
この規則は，H1要素以下の境界の幅，スタイル及び色を設定する。省略した値はその初期値に設定される。次の規則は境界の色を指定しないので，境界は，'color'特性が指定する色をもつ。
H1 { border-bottom: thick solid }
| 値: | [ <'border-width'> || <'border-style'> || <color> ] | inherit |
| 初期値: | 個々の特性を参照 |
| 適用対象: | すべての要素 |
| 継承: | しない |
| パーセント値: | N/A |
| メディア: | 視覚メディア |
'border'特性は，ボックスの上下左右すべての境界に，同じ幅，色及びスタイルを設定するための簡略記述特性とする。簡略記述'margin'特性及び簡略記述'padding'特性とは異なり，'border'特性は，上下左右の境界に異なる値を設定することができない。上下左右の境界に異なる値を設定するには，他の境界特性を一つ以上使用しなければならない。
例えば, 次の最初の規則はその後の四つの規則の集合と等しい。
P { border: solid red }
P {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
特性には，ある程度重複する部分があるので，規則が指定される順序は重要とする。
次の例を検討する。
BLOCKQUOTE {
border-color: red;
border-left: double;
color: black
}
この例では, 左境界の色は黒となり，その他の境界の色は赤となる。これは，'border-left'が，幅，スタイル及び色を設定していることによる。'border-left'特性は色値を提供しないので，'color'特性から色値をとることになる。'color'特性が'border-left'特性の後に設定されていることは，重要ではない。