要素のボックスの位置及びサイズは，一定の長方形に関連して計算されることが 多い。この長方形を要素の包含ブロックと呼ぶ。 要素の包含ブロックの定義を次に示す。
これらの先祖が存在しない場合，ルート要素のボックスの内容辺が包含ブロックを設定する。
次の文書の，位置指定がない包含ブロックをその次に示す。
<HTML>
<HEAD>
<TITLE>Illustration of containing blocks</TITLE>
</HEAD>
<BODY id="body">
<DIV id="div1">
<P id="p1">This is text in the first paragraph...</P>
<P id="p2">This is text <EM id="em1"> in the
<STRONG id="strong1">second</STRONG> paragraph.</EM></P>
</DIV>
</BODY>
</HTML>
| ボックスを生成する要素 | 包含ブロックを設定する要素 |
|---|---|
| body | 初期包含ブロック(UA-依存) |
| div1 | body |
| p1 | div1 |
| p2 | div1 |
| em1 | p2 |
| strong1 | p2 |
"div1"を，次のとおりに位置指定した場合を考える。
#div1 { position: absolute; left: 50px; top: 50px }
この場合，"div1"の包含ブロックは，もはや"body"ではない。すなわち，この包含ブロックは，初期包含ブロックになる。これは，他に位置指定された先祖ボックスが存在しないことによる。
さらに"em1"を位置指定した場合を示す。
#div1 { position: absolute; left: 50px; top: 50px }
#em1 { position: absolute; left: 100px; top: 100px }
この場合の包含ブロックの表は次となる。
| ボックスを生成する要素 | 包含ブロックを設定する要素 |
|---|---|
| body | 初期包含ブロック |
| div1 | 初期包含ブロック |
| p1 | div1 |
| p2 | div1 |
| em1 | div1 |
| strong1 | em1 |
"em1"を位置指定することによって，その包含ブロックは，位置指定された最も近接する先祖ボックス，すなわち，"div1"によって生成されるボックスとなる。
| 値: | <length> | <percentage> | auto | inherit |
| 初期値: | auto |
| 適用対象: | 非置換の行内要素， 表行及び行集合を除くすべての要素 |
| 継承: | しない |
| パーセント値: | 包含ブロックの 幅を参照 |
| メディア: | 視覚メディア |
この特性は，ブロックレベル要素及び置換要素が生成するボックスの内容幅を指定する。
この特性は，非置換の行内レベル要素には適用されない。非置換の行内要素のボックス幅は，子供が相対位置指定される前の内部でレンダリングされる内容の幅とする。行内ボックスが行ボックスに流れ込むことを思い出すこと。行ボックスの幅は，包含ブロックによって提供されるが，浮動体が存在する場合は，縮小されてもよい。
置換要素のボックスの幅は要素固有であって，この特性の値が'auto'以外である場合は，利用者エージェントが置換要素のボックス幅を変倍してもよい。
値には次の意味がある。
'width'に負の値を適用することは不当とする。
例えば，次の規則は，段落の内容幅を100画素に固定している。
P { width: 100px }
要素の'width'特性，'margin-left'特性，'margin-right'特性，'left'特性及び'right'特性の計算値は，生成されるボックスの型及び互いの値に依存する。原則として'auto'を適切な値で置換して，計算値が指定値と同じになるようにするが，例外もある。次の状況を区別する必要がある。
1〜6は，相対位置決めを含む。
'width'特性は適用されない。'left'，'right'，'margin-left'又は'margin-right'の指定値が'auto'の場合は，計算値は'0'となる。
'left'，'right'，'margin-left'又は 'margin-right'の指定値が'auto'の場合は，計算値は'0'となる。'width'の指定値が'auto'の場合は，計算値は要素の要素固有の幅となる。
'left'又は'right'の指定値が'auto'の場合は，その計算値は0とする。他の特性については，次の等式が常に成立しなければならない。
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = 包含ブロックの幅
境界スタイルが'none'である場合，境界幅として'0'を使用すること。ここに列挙したすべてが'auto'以外の指定値をもつ場合は，それらの値は"制約し過ぎ"であって，計算値のうち一つは，その指定値と異ならなければならない。'direction'特性が'ltr'という値をもつ場合は，'margin-right'の指定値は無視され，その値はこの等式を満たすように計算される。'direction'の値が'ltr'である場合は，代わりに'margin-left'の指定値が無視され，その値は，上の等式を満たすように計算される。
'auto'として指定される値がただ一つだけ存在する場合は，その計算値は，上の等式から導かれる。
'width'が 'auto'に設定される場合，他の'auto'値はどれも'0'となり，'width'は結果として上の等式から導かれる。
'margin-left'及び'margin-right'の両方が'auto'である場合，両者の計算値は同じとなる。
'left'又は'right'が'auto'である場合，計算値は0とする。'width'が'auto'として指定される場合，その値は要素の要素固有の幅とする。マージンの一つが'auto'である場合，計算値は，上の等式によって提供される。さらに両マージンとも'auto'である場合，計算値は等しい。
'left'，'right'，'width'，'margin-left'又は'margin-right'が'auto'として指定される場合，計算値は'0'とする。
'left'，'right'，'margin-left'又は'margin-right'が'auto'として指定される場合，計算値は'0'とする。'width'が'auto'である場合，その値は要素の要素固有の幅とする。
絶対位置決めされる非置換要素の計算値を決定する制約を次に示す。
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = 包含ブロックの幅
境界スタイルが'none'である場合は，境界幅として'0'を使用すること。次の順序で置換を行うことによって，この制約の解に到達する。
この状況は，10.3.7と類似しているが，要素が要素固有の幅をもつ場合は例外とする。置換の順序を次に示す。
| 値: | <length> | <percentage> | inherit |
| 初期値: | UAに依存 |
| 適用対象: | 行内非置換要素及び表要素を除くすべての要素 |
| 継承: | しない |
| パーセント値: | 包含ブロックの幅を参照 |
| メディア: | 視覚メディア |
| 値: | <length> | <percentage> | none | inherit |
| 初期値: | none |
| 適用対象: | 行内非置換要素及び表要素を除くすべての要素 |
| 継承: | しない |
| パーセント値: | 包含ブロックの幅を参照 |
| メディア: | 視覚メディア |
これら二つの特性によって，文書作成者は，ボックスの幅を一定の範囲に制限することができる。値には次の意味がある。
次のアルゴリズムは，二つの特性が'width'特性の計算値にどのように影響するかを示す。
利用者エージェントは，'min-width'特性に対して負ではない最小値を定義してよい。この値は要素ごとに変化したり，他の特性に依存してもよい。'min-width'がこの制限下にある場合，'min-width'が明示的に設定されているか，又は'min-width'が'auto'であって以下の規則により小さくなり過ぎるか，のいずれかの理由によって，利用者エージェントは，最小値を計算値として使用してよい。
| 値: | <length> | <percentage> | auto | inherit |
| 初期値: | auto |
| 適用対象: | 行内非置換要素，表要素及び列集合を除くすべての要素 |
| 継承: | しない |
| パーセント値: | 説明参照 |
| メディア: | 視覚メディア |
この特性は，ブロックレベル要素及び置換要素が生成するボックスの内容の高さを指定する。
この特性は，非置換行内レベル要素には適用されない。行内非置換要素のボックスの高さは，要素の(継承される可能性がある)'line-height'値によって提供される。
値には次の意味がある。
'height'に対する負の値は，不当とする。
'top'，'margin-top'，'height'，'margin-bottom'及び'bottom'の値を計算するためには，次の様々な種類のボックスを区別しなければならない。
1〜6は，相対位置決めを含む。
'top'，'bottom'，'margin-top'又は'margin-bottom'が'auto'である場合，計算値は0とする。'height'特性は適用されないが，ボックスの高さは'line-height'特性によって与えられる。
'top'，'bottom'，'margin-top'又は'margin-bottom'が'auto'である場合，計算値は0とする。'height'が 'auto'である場合，計算値は要素固有の高さとする。
'top'，'bottom'，'margin-top'又は'margin-bottom'が'auto'である場合，計算値は0とする。'height'が'auto'である場合，高さは，要素がブロックレベルの子供をもつかどうかに依存する。要素が行内レベルの子供だけをもつ場合は，高さは，最上部の行ボックスの上辺から最下部の行ボックスの下辺までの距離とする。要素がブロックレベルの子供をもつ場合は，高さは，最上部ブロックレベルの子ボックスの境界上辺から，最下部ブロックレベルの子ボックスの境界下辺までとする。考慮するのは通常のフローにおける子供に限る。すなわち，浮動ボックス及び絶対位置決めボックスは無視され，相対位置決めされたボックスは，位置指定がないものとして考慮される。子ボックスが匿名ボックスであってもよい点に注意すること。
絶対位置決め要素に対しては，上下方向の寸法は，次の制約を満足しなければならない。
'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = 包含ブロックの高さ
境界スタイルが'none'である場合は，境界幅として'0'を使用すること。この制約の解は，次の順序で置換を実施する。
この状況は，要素が要素固有の高さをもつこと以外は，10.6.4の状況に類似している。置換の順序を次に示す。
要素の高さを一定の範囲に制限することが有用なこともある。次の二つの特性は，この機能を提供する。
| 値: | <length> | <percentage> | inherit |
| 初期値: | 0 |
| 適用対象: | 非置換要素及び表要素を除くすべての要素 |
| 継承: | しない |
| パーセント値: | 包含ブロックの高さを参照 |
| メディア: | 視覚メディア |
| 値: | <length> | <percentage> | none | inherit |
| 初期値: | none |
| 適用対象: | 非置換要素及び表要素を除くすべての要素 |
| 継承: | しない |
| パーセント値: | 包含ブロックの高さを参照 |
| メディア: | 視覚メディア |
これら二つの特性によって，文書作成者は，ボックスの高さを一定の範囲に制限することができる。値には次の意味がある。
次のアルゴリズムは，これら二つの特性が'height'特性の計算値にどのように影響するかを示している。
行内フォーマット化文脈で示したとおり，利用者エージェントは，上下に積み重ねた行ボックスに行内ボックスを流し込む。行ボックスの高さの決定方法は次による。
空の行内要素は空の行内ボックスを生成するが，これらのボックスは，まだ，マージン，パディング，境界及び行の高さをもち，内容をもつ要素と同様にこれらの計算に影響を及ぼす。
行ボックスの中にあるすべてのボックスが下辺に揃えられている場合，行ボックスの高さは，最も高いボックスの高さと正確に一致することに注意すること。しかし，ボックスが共通基底線に揃えられている場合は，行ボックスの上辺及び下辺は，最も高いボックスの上辺及び下辺に重ならなくともよい。
行内ボックスの高さは，'line-height' > 1emなど，ボックスのテキストのフォントサイズとは異なってもよいので，レンダリングされるグリフの上下にスペースが存在してもよい。フォントサイズと'line-height'の計算値との差を，リーディングと呼ぶ。リーディングの半分を半リーディングと呼ぶ。
利用者エージェントは，行内ボックスの中でグリフを上下方向の中央揃えにし，上下に半リーディング分のスペースを挿入する。例えば，テキストの高さが'12pt'であって，'line-height'値が'14pt'である場合は，2pt分のスペースが上下に1ptずつ挿入することが望ましい。空ボックスには無限に小さい文字があると考えて，空ボックスにもこれを適用する。
'line-height'値がフォントサイズよりも小さい場合は，最終的な行内ボックスはフォントサイズより小さくなり，レンダリングされるグリフはボックスの外側に"はみ出す"。そのようなボックスが行ボックスの辺に接触する場合には，レンダリングされるグリフは，隣接する行ボックスにも"はみ出す"。
非置換要素のマージン，境界及びパディングは，行内ボックスの高さの計算には入れず，そこで行ボックスの計算にも入れないが，それでもそれらの領域は行内ボックスの周囲にレンダリングされる。これは，行ボックスの高さが含まれるボックスの外辺より短い場合に，パディング及び境界の背景及び色は，隣接する行ボックスへと"はみ出す"ことがあってもよい，ことを意味する。しかし，この場合，行ボックスを使用して，境界領域及びパディング領域を"切り取る"，すなわち，それらをレンダリングしない利用者エージェントがあってもよい。
| 値: | normal | <number> | <length> | <percentage> | inherit |
| 初期値: | normal |
| 適用対象: | すべての要素 |
| 継承: | する |
| パーセント値: | 要素自体のフォントサイズを参照 |
| メディア: | 視覚メディア |
内容が行内レベル要素から構成されるブロックレベル要素においてこの特性が設定され場合，この特性は，各々の生成された行内ボックスの最小の高さを指定する。
この特性が行内レベル要素で設定される場合，この特性は，その要素が生成する各ボックスの正確な高さを指定する。ただし置換行内要素は例外であって，その場合には，ボックスの高さは，'height'特性によって提供される。
この特性の値には次の意味がある。
次の例における三つの規則は，結果として同じ行の高さになる。
DIV { line-height: 1.2; font-size: 10pt } /* number */
DIV { line-height: 1.2em; font-size: 10pt } /* length */
DIV { line-height: 120%; font-size: 10pt } /* percentage */
要素が一つ以上のフォントでレンダリングされるテキストを含む場合，利用者エージェントは，最大のフォントサイズに従って'line-height'値を決定するのがよい。
一般に，一つの段落(ただし上下方向に長い画像のないもの)で，すべての行内ボックスを通じて'line-height'の値が一つだけの場合は，連続する行の基底線間の距離は，'line-height'にちょうど等しくなる。表などで，異なるフォントを用いたテキストの列を揃えなければならない場合に，これは重要である。
'font-size'特性及び'line-height'特性がボックスの高さを決定するために直接に使用されない場合でも，置換要素は，それらの特性をもつ点に注意すること。しかし，'font-size'は，'em'単位及び'ex'単位を定義するために使用され，'line-height'は，'vertical-align'特性で使用される。
| 値: | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit |
| 初期値: | baseline |
| 適用対象: | 行内レベル要素及び'table-cell'要素 |
| 継承: | しない |
| パーセント値: | 要素自体の'line-height'を参照 |
| メディア: | 視覚メディア |
この特性は，行ボックス内部において行内レベル要素が生成するボックスの上下位置決めに影響する。その要素が匿名行内ボックスを生成する場合，次の値は，親行内レベル要素又は親ブロックレベル要素を参照できる場合にだけ意味がある。それら親が存在しない場合は，効果はない。
備考 表の文脈では，この特性の値には若干異なる意味がある。詳細については，表の高さのアルゴリズムを参照のこと。
残りの値は，生成されたボックスが出現する行ボックスを参照する。