目次
要素のボックスの位置および大きさは、その要素の包含ブロックと呼ばれる矩形を参照して計算される。要素の包含ブロックは以下のように定義される：
そのような先祖がない場合、包含ブロックは初期包含ブロックとなる。
ページメディアにおいて、絶対配置される要素は、任意のページ改行を（あたかも文書が連続であるかのように）無視するその要素の包含ブロックに関して配置される。要素は、その後複数のページに分割されてもよい。
レイアウトされている（現在のページ）以外のページ上の位置を解決する、またはすでに印刷のために描画されている現在のページの位置を解決する絶対配置されるコンテンツのために、プリンターはコンテンツを配置してもよい
複数のページに分割されるブロックレベル要素は各ページで異なる幅を持ってもよく、デバイス特性による制限を受けてもよいことに注意する。
配置なしで、以下の文書の包含ブロックは：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<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>
次のように設置される：
| ボックスを生成する要素 | 包含ブロックを設定する要素 |
|---|---|
| html | 初期包含ブロック（UA依存） |
| body | html |
| div1 | body |
| p1 | div1 |
| p2 | div1 |
| em1 | p2 |
| strong1 | p2 |
"div1"を配置する場合：
#div1 { position: absolute; left: 50px; top: 50px }
その包含ブロックはもはや"body"ではない。要素は初期包含ブロックになる（配置される祖先ボックスが存在しないため）。
さらに"em1"を配置する場合：
#div1 { position: absolute; left: 50px; top: 50px }
#em1 { position: absolute; left: 100px; top: 100px }
包含ブロックのテーブルはこのようになる：
| ボックスを生成する要素 | 包含ブロックを設定する要素 |
|---|---|
| html | 初期包含ブロック（UA依存） |
| body | html |
| div1 | 初期包含ブロック |
| p1 | div1 |
| p2 | div1 |
| em1 | div1 |
| strong1 | em1 |
"em1"の位置指定によって、その包含ブロックは最も近い位置指定される祖先ボックスになる（すなわち、"div1"によって生成される）。
| プロパティ名： | width |
|---|---|
| 値： | <length> | <percentage> | auto | inherit |
| 初期値： | auto |
| 適用要素： | 非置換インライン要素、テーブル列と列グループを除く全要素 |
| 継承： | no |
| パーセンテージ： | 包含ブロックを含む幅を参照 |
| メディア： | visual |
| 算出値： | パーセンテージまたは'auto'として指定または絶対長さ |
このプロパティはボックスのコンテンツ幅を指定する。
このプロパティは、非置換インライン要素に適用しない。非置換インライン要素のボックス幅は、その要素の中で（任意の子供の相対オフセットの前の）表示済みコンテンツの幅である。インラインボックスは、行ボックスにフローすることを思い出すこと。行ボックスの幅は包含ブロックによって与えられるが、浮動体の存在によって短縮されてもよい。
値は次の意味を持つ：
'width'に対する負の値は不正である。
たとえば、次の規則は段落のコンテンツ幅を100pxに固定する：
p { width: 100px }
レイアウトに使用されるようなある要素の'width'、'margin-left'、'margin-right'、'left'および'right'プロパティの値は、生成されるボックスの種類および互いの値に依存する。（レイアウトに使用される値はしばしば使用値とも呼ばれる。）原則として、使用される値は、算出値と同じであり、一部の適切な値によって置き換えられた'auto'をもち、包含ブロックに基づいて計算された割合であるが、例外がある。以下の状況は区別される必要がある：
ポイント1-6と9、10に対して、相対配置される要素の場合において'left'および'right'の値は、9.4.3節の規則によって決定される。
注。 'width'の使用値は仮の値であり、何度も計算されてもよく、'min-width'および'max-width'に依存する。後述の幅の最小値と最大値の節を参照のこと。
'width'プロパティは適用しない。'margin-left'または'margin-right'に対する'auto'の算出値は、'0'の使用値になる。
'margin-left'または'margin-right'に対する'auto'の算出値は、'0'の使用値になる。
'height'および'width'が'auto'の算出値を持ち、かつ要素が内在幅を持つ場合、内在幅は'width'の使用値となる。
'height'および'width'が'auto'の算出値を持ち、かつ要素が内在幅を持たない場合、内在高さと内在幅を持つ。つまり、'width'が'auto'の算出値を持つ場合、'height'は別の算出値を持ち、そしてその要素は内在比を持つ。その結果'width'の使用値は次のようになる：
(使用高さ) * (内在比)
'height'および'width'が'auto'の算出値を持ち、かつその要素が内在比を持つが内在高さまたは幅を持たない場合、'width'の使用値はCSS 2.2で未定義である。しかし、その包含ブロックの幅が置換要素の幅に依存しない場合、'width'の使用値は通常フローにおける非置換ブロックレベル要素に用いる拘束方程式より計算されることが示唆される。
そうでなければ、'width'が'auto'の算出値を持つ場合、その要素は内在幅を持ち、その結果その内在幅は'width'の使用値となる。
そうでなければ、上記の条件に一致せず、'width'が'auto'の算出値を持つ場合、'width'の使用値は300pxになる。デバイスにあわせて300pxが広すぎる場合、ユーザーエージェントは2:1の比率を持つ最大の矩形の幅を使用し、代わりにデバイスに収めるべきである。
次の等式はその他のプロパティの使用値の間で保持されなければならない：
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = 包含ブロックの幅
'width'が'auto'でない（その上'margin-left'または'margin-right'のいずれかが'auto'でない）場合、'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width'は包含ブロックの幅より大きくなり、その結果'margin-left'または'margin-right'のいずれかの'auto'値は以下の規則によって0として扱われる。
上記のすべてが'auto'以外の算出値を持つ場合、値は"制限しすぎ"であるといい、使用値の1つはその算出値と異なる値を持つ。包含ブロックの'direction'プロパティが値'ltr'を持つ場合、'margin-right'の指定値は無視され、その値は等式が真になるように計算される。'direction'の値が'rtl'である場合、代わりにこれは'margin-left'に起こる。
1つの値のみが'auto'に指定される場合、その使用値は等式から得られる。
'width'が'auto'に設定される場合、それ以外の'auto'の値は'0'になり、'width'は等式から得られる。
'margin-left'と'margin-right'の両方が'auto'である場合、両者の使用値は等しい。これは、包含ブロックの辺に対して要素を水平に中心に置く。
'width'の使用値は、インライン置換要素によって決定される。その結果非置換ブロックレベル要素の規則がマージンの決定に適用される。
'margin-left'または'margin-right'が'auto'として計算される場合、使用値は'0'となる。
'width'が'auto'として計算される場合、使用値は"適合するよう縮む"幅となる。
適合するように縮む幅の計算は、自動テーブルレイアウトアルゴリズムを使用したテーブルセルの幅の計算に似ている。おおまかには、明示的な改行が起きる場所以外で改行のないコンテンツを整形することによって望ましい幅を計算し、かつ望ましい最小の幅も計算する。すなわち、すべての可能な限りの改行を試みる。CSS 2.2は、実際のアルゴリズムを定義しない。そして、利用可能な幅を探す。この場合、これはすべての関連のあるスクロールバーの'margin-left'、'border-left-width'、'padding-left'、'padding-right'、'border-right-width'、'margin-right'および幅の使用値を引いた包含ブロックの幅である。
その結果、適合するように縮む幅は次のようになる：min(max(望ましい最小の幅, 利用可能な幅), 望ましい幅)。
'margin-left'または'margin-right'が'auto'として計算される場合、使用値は'0'となる。'width'の使用値はインライン置換要素によって決定される。
この節と次の節のために、用語（ある要素の）"静的位置"は、おおまかに、要素が通常フロー内にある位置を参照する。より正確には：
しかし、仮ボックスの次元を実際に計算するよりむしろ、ユーザーエージェントは可能性のある位置で見当を付けることが自由である。
静的位置を計算する目的に対して、固定配置される要素の包含ブロックはビューポートの代わりに初期包含ブロックとなり、そしてすべてのスクロール可能なボックスは、ボックスの原点までスクロールされると仮定されるべきである。
要素の使用値を決定する制約は：
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = 包含ブロックの幅
'left'、'width'、'right'の3つすべてが'auto'である場合：最初に'margin-left'と'margin-right'のすべての'auto'値を0に設定する。次に、静的位置包含ブロックを設置する要素の'direction'プロパティが静的位置に'left'を設定される'ltr'であり、かつ下記の番号3の規則を適用する。そうでなければ、静的位置に'right'を設定し、下記の番号1の規則を適用する。
この3つが'auto'でない場合：'margin-left'と'margin-right'の両方が'auto'である場合、2つのマージンが等しい値を得る追加制約の下で式を解く。ただしこの追加制約が2つのマージンを負にする場合を除く。そして2つのマージンが負になる場合に、包含ボックスの方向が'ltr'（'rtl'）であるならば、'margin-left'（'margin-right'）を0に設定し、'margin-right'（'margin-left'）を解決する。'margin-left'または'margin-right'の1つが'auto'である場合、その値について等式を解く。値が制限しすぎである場合、（包含ブロックの'direction'プロパティが'rtl'の場合）または'right'（'direction'が'ltr'の場合）の値を無視し、その値について解く。
そうでなければ、'margin-left'および'margin-right'の'auto'値を0に設定し、以下の適用される6つの規則のうちの1つを選ぶ。
適合するように縮む幅の計算は、自動テーブルレイアウトアルゴリズムを使用したテーブルセルの幅の計算に似ている。おおまかには、明示的な改行が起きる場所以外で改行のないコンテンツを整形することによって望ましい幅を計算し、かつ望ましい最小の幅も計算する。すなわち、すべての可能な限りの改行を試みる。CSS 2.2は、実際のアルゴリズムを定義しない。次に、利用可能な幅を計算する。これは'left'（1の場合）または'right'（3の場合）を0に設定した後で'width'について解くことにより見つけられる。
その結果、適合するように縮む幅は次のようになる：min(max(望ましい最小の幅, 利用可能な幅), 望ましい幅)。
この場合、10.3.7節が制約式を通して適用するが、10.3.7節の残りの部分は以下の規則で置き換えられる：
'width'が'auto'である場合、使用値は浮動要素のように適合するように縮む幅になる。
'margin-left'または'margin-right'に対する'auto'の算出値は、'0'の使用値になる。
置換インライン要素に同じ。
| プロパティ名： | min-width |
|---|---|
| 値： | <length> | <percentage> | inherit |
| 初期値： | 0 |
| 適用要素： | 非置換インライン要素、テーブル列と列グループを除く全要素 |
| 継承： | no |
| パーセンテージ： | 包含ブロックを含む幅を参照 |
| メディア： | visual |
| 算出値： | 指定値のパーセンテージまたは絶対長さ |
| プロパティ名： | max-width |
|---|---|
| 値： | <length> | <percentage> | none | inherit |
| 初期値： | none |
| 適用要素： | 非置換インライン要素、テーブル列と列グループを除く全要素 |
| 継承： | no |
| パーセンテージ： | 包含ブロックを含む幅を参照 |
| メディア： | visual |
| 算出値： | 指定されたパーセンテージまたは絶対長さまたは'none' |
この2つのプロパティは、著者にあるコンテンツ幅で制限することを許可する。値は次の意味を持つ：
'min-width'と'max-width'に対する負の値は不正である。
CSS 2.2において、テーブル、インラインテーブル、テーブルセル、テーブル列、列グループ上の'min-width'および'max-width'の効果は未定義である。
次のアルゴリズムはどのように2つのプロパティが'width'プロパティの使用値に影響を及ぼすかを説明する：
このステップは上記のプロパティの実際の算出値に影響しない。
しかし、置換要素の内在比と'width'および'height'の両方に'auto'が指定されるため、アルゴリズムは次のようになる：
適切な制限違反に対して解決される高さと幅の値をテーブルから選択する。min ≤ maxが真となるために、max-widthとmax-heightをmax(min, max)として解釈する。このテーブルにおいてwとhは'min-width'、'min-height'、'max-width'、'max-height'プロパティを無視した幅と高さの計算結果を表す。通常、内在幅と高さを持つが、内在比を伴う置換要素の場合はもたない。
注；明確な幅または高さが設定され、他の次元がautoである場所の場合、auto側の最小または最大の制限を適用することは制限しすぎの状況を引き起こす。仕様はこの振る舞いで明らかであるが、著者が予期しないことが存在しないわけではない。CSS3 object-fitプロパティはこの状況で異なる結果を得るために使われる。
| 制限違反 | 解決される幅 | 解決される高さ |
|---|---|---|
| none | w | h |
| w > max-width | max-width | max(max-width * h/w, min-height) |
| w < min-width | min-width | min(min-width * h/w, max-height) |
| h > max-height | max(max-height * w/h, min-width) | max-height |
| h < min-height | min(min-height * w/h, max-width) | min-height |
| (w > max-width) かつ (h > max-height)、ここで (max-width/w ≤ max-height/h) | max-width | max(min-height, max-width * h/w) |
| (w > max-width) かつ (h > max-height)、ここで (max-width/w > max-height/h) | max(min-width, max-height * w/h) | max-height |
| (w < min-width) かつ (h < min-height)、ここで (min-width/w ≤ min-height/h) | min(max-width, min-height * w/h) | min-height |
| (w < min-width) かつ (h < min-height)、ここで (min-width/w > min-height/h) | min-width | min(max-height, min-width * h/w) |
| (w < min-width) かつ (h > max-height) | min-width | max-height |
| (w > max-width) かつ (h < min-height) | max-width | min-height |
あたかも'width'がこの値で計算されたかのように、上記の"幅とマージンの計算"のもとで規則を適用する。
| プロパティ名： | height |
|---|---|
| 値： | <length> | <percentage> | auto | inherit |
| 初期値： | auto |
| 適用要素： | 非置換インライン要素、テーブル行と行グループを除く全要素 |
| 継承： | no |
| パーセンテージ： | 文を参照 |
| メディア： | visual |
| 算出値： | パーセンテージまたは'auto'として指定または絶対長さ |
このプロパティはボックスのコンテンツ高さを指定する。
このプロパティは、非置換インライン要素に適用しない。代わりに使用する規則については非置換インライン要素の高さとマージンの節を参照のこと。
値は次の意味を持つ：
絶対配置される要素の包含ボックスの高さは要素自身の大きさから独立しており、したがってそのような要素上のパーセント高さは常に解決できることに注意する。しかし、要素は文書で後に来る要素が処理されるまで高さが未知であってもよい。
'height'に対する負の値は不正である。
たとえば、次の規則は段落の高さを100pxに設定する：
p { height: 100px }
100px以上のコンテンツ高さを持つ段落は、'overflow'プロパティにしたがってボックスからはみ出す。
'top'、'margin-top'、'height'、'margin-bottom'、'bottom'の値を計算するために、ボックスの種類によって分類する必要がある：
ポイント1-6と9、10については、'top'および'bottom'の使用値は、9.4.3節の規則によって決定される。
注：これらの規則は、任意の他の要素に応じてルート要素に適用する。
注。 'height'の使用値は仮の値であり、何度も計算されてもよく、'min-height'および'max-height'に依存する。下記の高さの最小値と最大値の節を参照のこと。
'height'プロパティは適用しない。コンテンツ領域の高さはフォントを基にすべきであるが、この仕様はその方法を指定しない。たとえば、ユーザーエージェントはemボックスやフォントの最大のアセンダーやディセンダーを用いてもよい。（前者は、著者が'line-height'に対する背景スタイルの制御を確実にするだろうが、そのコンテンツ領域の外側に描くグリフをもたらすだろう。後者は、emボックスの上または下の部分にあるグリフがまだコンテンツ領域内に収まることを保証するが、異なるフォントごとに異なるサイズのボックスをもたらすだろう。）
注：CSS level 3は、コンテンツ高さに用いるフォントの寸法を選択するためのプロパティをおそらく含む。
非置換インラインボックスのボーダーおよびマージン、垂直方向のパディングは、コンテンツ領域の上部と下部で開始し、'line-height'と関係しない。しかし'line-height'に限り、行ボックスの高さの計算時に用いられる。
1つ以上のフォントが用いられる場合（これはグリフが異なるフォントで発見された場合に起こる）、コンテンツ領域の高さはこの仕様で定義されない。しかし、高さはコンテンツ領域が十分な高さとなるような、要素のすべてのフォントの(1)emボックスまたは(2)最大のアセンダーとディセンダーのいずれかを選択することを示唆する。フォントのベースライン揃えにに応じて、これは関連するフォントの大きさのすべてより大きくてもよいことに注意する。
'margin-top'または'margin-bottom'が'auto'である場合、使用値は0になる。
'height'と'width'が'auto'の算出値と内在高さの両方である場合、内在高さが'height'の使用値になる。
そうでなければ、'height'が'auto'の算出値を持つ場合、その要素は内在比を持ち、結果その'height'の使用値は次のようになる：
(使用幅) / (内在比)
そうでなければ、'height'が'auto'の算出値を持つ場合、その要素は内在高さを持ち、結果その内在高さは'height'の使用値となる。
そうでなければ、上記の条件に一致しないが、'height'が'auto'の算出値を持つ場合、'height'の使用値は2:1の比を持つ最も大きい矩形の高さに設定されなければならず、150pxより大きくない高さを持ち、かつデバイスの幅より大きくない幅を持つ。
この節も'overflow'が'visible'に計算されない場合に通常フローで非置換ブロックレベル要素に適用されるが、ビューポートに伝播されている。
'margin-top'または'margin-bottom'が'auto'である場合、使用値は0になる。'height'が'auto'の場合、高さはその要素が子供ブロックレベル要素を持つかどうか、およびパディングまたはボーダーを持つかどうかによって異なる。
要素の高さは要素の上コンテンツ辺から、以下のうち最初に受け入れ可能なものまでの距離となる：
通常フローで子供のみを考慮に入れる（すなわち、浮動ボックスと絶対配置ボックスは無視され、相対配置ボックスはオフセットを考慮しない）。子ボックスは匿名ブロックボックスであってもよいことに注意する。
本節と次節の目的のために、用語（ある要素の）"静的位置"は、おおまかに、要素が通常フロー内にある位置を参照する。より正確に、'position'の指定値が'static'であり、'float'の指定値が'none'であり、かつ'clear'の指定値が'none'である場合、'top'の通常位置は、包含ブロックの上辺から、要素の最初のボックスの仮定ボックスの上マージン辺までの距離である。（9.7節の規則によれば、この仮計算は異なる'display'の算出値と仮定することでも要求されるかもしれないことに注意する。）仮ボックスが包含ブロックの上にある場合、この値は負になる。
しかし、仮ボックスの次元を実際に計算するよりむしろ、ユーザーエージェントは可能性のある位置で見当を付けることが自由である。
通常位置を計算する目的に対して、固定位置要素の包含ブロックはビューポートの代わりに初期包含ブロックとなる。
絶対配置される要素に対して、垂直方向の使用値はこの等式を満たさなければならない：
'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = 包含ブロックの高さ
'top'、'height'、'bottom'の3つすべてがautoである場合、'top'に通常位置を設定し、以下の規則3を適用する。
3つすべてが'auto'でない場合、'margin-top'と'margin-bottom'の両方が'auto'の場合、2つのマージンが等しい値になるような追加条件のもとで等式を解く。'margin-top'または'margin-bottom'の1つが'auto'である場合、その値について等式を解く。値が制限しすぎである場合、'bottom'の値を無視し、その値について解く。
そうでなければ、以下の6つの規則のうちの1つを選んで適用する。
これは、要素が内在高さを持つことを除いて、1つ前の場合と似ている。置換の順序は現状では次のようになる：
この節は以下に適用する：
'margin-top'または'margin-bottom'が'auto'である場合、使用値は0になる。'height'が'auto'である場合、10.6.7節によって要素の子孫に依存する。
インラインブロック要素に対して、行ボックスの高さの計算時にマージンボックスが使用される。
ある場合（たとえば、上記の10.6.4節や10.6.6節を参照）において、要素がブロック整形コンテキストを設置する高さは以下のように計算される：
その要素がインラインの子供のみを持つ場合、高さは、最上段の行ボックスの上と最下段の行ボックスの下の間の距離となる。
その要素がインラインの子供である場合、高さは、最上段のブロックレベル子ボックスの上マージン辺と行ボックスの上辺から最下段の行ボックスの下辺との間の距離となる。
絶対配置される子供は無視され、かつ相対配置ボックスはオフセットを考慮しない。子ボックスは匿名ブロックボックスであってもよいことに注意する。
加えて、要素が任意の浮動子孫を持ち、その子孫の下マージン辺が要素の下コンテンツ辺の下にある場合、高さはその辺を含むために増加する。このブロック整形コンテキストに参加する浮動のみが考慮される。たとえば、絶対配置される子孫の内部で浮動する。すなわち他の浮動はない。
特定の範囲に要素の高さを制限することは便利な場合がある。2つのプロパティがこの機能を提供する：
| プロパティ名： | min-height |
|---|---|
| 値： | <length> | <percentage> | inherit |
| 初期値： | 0 |
| 適用要素： | 非置換インライン要素、テーブル行と行グループを除く全要素 |
| 継承： | no |
| パーセンテージ： | 文を参照 |
| メディア： | visual |
| 算出値： | 指定値のパーセンテージまたは絶対長さ |
| プロパティ名： | max-height |
|---|---|
| 値： | <length> | <percentage> | none | inherit |
| 初期値： | none |
| 適用要素： | 非置換インライン要素、テーブル行と行グループを除く全要素 |
| 継承： | no |
| パーセンテージ： | 文を参照 |
| メディア： | visual |
| 算出値： | 指定されたパーセンテージまたは絶対長さまたは'none' |
この2つのプロパティは、著者が特定の範囲にボックスの高さを制限できる。値は次の意味を持つ：
'min-height'および'max-height'に対する負の値は不正である。
CSS 2.2において、テーブル、インラインテーブル、テーブルセル、テーブル行、行グループ上の'min-height'および'max-height'の効果は未定義である。
次のアルゴリズムは、どのように2つのプロパティが'height'プロパティの使用値に影響を及ぼすかを説明する：
このステップは、'height'の実際の算出値に影響しない。したがって、たとえばステップは算出値に依存し、マージンの相殺に影響を与えない。
しかし、'auto'として計算された'width'と'height'の両方を持つ置換要素のために、使用幅と高さを見つけるために上記の最小値と最大幅の幅もとでアルゴリズムを使用する。その後、あたかも算出値であるかのように、結果の幅と高さを使用して、上記の"高さとマージンを計算"のもとに規則を適用する。
インライン整形コンテキストの節で示したように、ユーザーエージェントは縦に積み重ねた行ボックスの中にインラインレベルボックスをフローする。行ボックスの高さは次のように決定される：
空のインライン要素は空のインラインボックスを生成するが、このインライン要素のボックスはマージン、パディング、ボーダー、行の高さを依然として持ち、したがってコンテンツを持つ要素のようにこれらの計算に影響を与える。
CSSは、すべてのフォントがベースラインとその下に深さの上側に特性高さを指定するフォントメトリックスを持つことを仮定する。この節において、Aを高さ（与えられたサイズでの与えられたフォント）、Dを深さの意味で用いる。またAD = A + Dと定義し、上から下までの距離とする。（TrueTypeおよびOpenTypeフォントに対してどのようにAおよびDを発見するかについては下記の注を参照のこと。）これはフォントメトリック全体として存在し、任意の個別グリフのアセンダーおよびディセンダーと対応する必要はないことに注意する。
ユーザーエージェントは、それらの関連のベースラインによって相互に非置換インラインボックス内のグリフを揃えなければならない。それから各グリフに対して、AとDを決定する。1つの要素でグリフは異なるフォントに由来してもよく、ひいては同じAとDをすべて持つ必要もないことに注意する。インラインボックスが全くグリフを含まない場合、インラインボックスは要素の最初の利用可能なフォントのAとDをもつ支柱（ゼロ幅の不可視のグリフ）を含むと考えられる。
さらに各グリフに対して、追加で行間Lを決定する。ここでL = 'line-height' - AD。半行間は、上のAと他の半分の下のDで追加される、グリフとその行間の上のA' = A + L/2のベースラインの合計の高さ、D' = D + L/2の合計の深さで与えられる。
注。 Lは負であってもよい。
インラインボックスの高さは、すべてのグリフと両側のそれらの半行間を含んでおり、したがってこれは厳密に'line-height'である。子要素のボックスはこの高さに影響しない。
非置換要素のマージン、パディング、ボーダーは行ボックスの計算の一部ではないが、それでもこれらはインラインボックスの周りにレンダリングされる。これは、'line-height'によって指定される高さが包含ボックスの高さより小さい場合、パディングとボーダーの背景と色は隣接する行ボックスに"はみだし"てもよいことを意味する。ユーザーエージェントは文書の順番でボックスをレンダリングすべきである。これは、後続の行のボーダーに前の行のボーダーとテキストの上に描画させる。
注。 CSS 2.2はインラインボックスのコンテンツ領域がどのようなものであるかを定義せず（上記10.6.1節参照）、よって異なるユーザーエージェントが異なる場所で背景とボーダーを描いてもよい。
注。（現在の要素のフォントサイズにスケーリングした後の）AとDに対するフォントOS/2テーブルから"sTypoAscender"と"sTypoDescender"のメトリックを用いるOpenTypeまたはTrueTypeフォントを使用する実装を推奨する。これらのメトリックの不足において、HHEAテーブルから"Ascent"および"Descent"メトリックを使用すべきである。
| プロパティ名： | line-height |
|---|---|
| 値： | normal | <number> | <length> | <percentage> | inherit |
| 初期値： | normal |
| 適用要素： | すべての要素 |
| 継承： | yes |
| パーセンテージ： | 要素自身のフォントの大きさを参照 |
| メディア： | visual |
| 算出値： | <length>と<percentage>は絶対値、そうでなければ指定値に同じ |
インラインレベル要素から構成されるブロックコンテナ要素のコンテンツ上で、'line-height'は要素内の行ブロックの最小の高さを指定する。ちょうど、あたかも各行ボックスが要素のフォントと'line-height'プロパティをもつゼロ幅の行ボックスで開始されるかのように、最小の高さはベースラインとその下の最小深さより高い最小の高さからなる。この架空のボックスを"strut"と呼ぶ（この名前はTeXからアイデアを得ている）。
ベースラインの上下のフォントの高さと深さは、フォントに含まれるメトリックの存在を仮定する。（詳細は、CSS level 3を参照のこと。）
非置換インライン要素上で、'line-height'は、行ボックスの高さの計算で使用される高さを指定する。
このプロパティの値は以下の意味を持つ：
以下の例で3つの規則はいずれも同じ結果となる：
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 */
要素が1つ以上のフォントでレンダリングされたテキストを含む場合、ユーザーエージェントはもっとも大きなフォントサイズに従って、'通常の''line-height'値を決定してもよい。
注。 ブロックコンテナボックスですべてのインラインボックスに対して'line-height'の値が1つのみ存在し、かつインラインボックスがすべて同一のフォントである（かつ置換要素やインライン要素などが存在しない）場合、上記は、連続する行のベースラインが正確に別々の'line-height'であることを保証する。たとえばテーブルにおいて、これは異なるフォントのテキスト列を揃える際に重要になる。
| プロパティ名： | vertical-align |
|---|---|
| 値： | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit |
| 初期値： | baseline |
| 適用要素： | インラインレベルとテーブルセル要素 |
| 継承： | no |
| パーセンテージ： | 要素自身の'line-height'を参照 |
| メディア： | visual |
| 算出値： | <length>と<percentage>は絶対長さ、そうでなければ指定値に同じ |
このプロパティは、インラインレベルボックスによって生成されるボックスに属する行ボックスの内側の垂直方向の位置に作用する。
注。 このプロパティの値は、テーブルのコンテキストで異なる意味を持つ。詳細はテーブルの高さのアルゴリズムの節を参照のこと。
以下の値は、親インライン要素または親ブロックコンテナ要素の支柱に関してのみ意味を持つ。
以下の定義において、非置換インライン要素に対して、配置に使用されるボックスは、高さが'line-height'となるボックスである（包含ボックスのグリフおよび両側の半行間を含む。上記を参照）。他のすべての要素に対して、配置に使用するボックスはマージンボックスである。
以下の値は行ボックスに対して要素を揃える。要素は行ボックスに対して揃えられる子を持ってもよいので（順番に子孫が行ボックスに対して揃えられてもよいので）、この値は整列サブツリーで境界を使用する。インライン要素の整列サブツリーは、要素と、計算される'vertical-align'値が'top'または'bottom'でないすべての子供インライン要素の整列サブツリーを含む。整列サブツリーの上は、サブツリーにおいてボックスの上の最も高いものであり、下も同様である。
'inline-table'のベースラインは、テーブルの最初の行のベースラインである。
'overflow'プロパティが'visible'以外の算出値を持つ、またはそれがどちらか一方のフロー内の行ボックスを持たない場合、'inline-block'のベースラインは通常フローにおけるその最後の行ボックスのベースラインとなる。この場合、ベースラインは下マージン辺となる。