内容
要素のボックスの位置とサイズは、時々、特定の矩形に対して計算されます。この矩形はその要素の包含ブロックと呼ばれます。要素の包含ブロックは以下のように定義されます:
そのような祖先が存在しない場合、包含ブロックは初期包含ブロックです。
ページ化されたメディアでは、絶対配置された要素は、ページ区切りを無視してその包含ブロックに対して位置を決定します（文書が連続しているかのように）。その後、その要素は複数のページにわたって分割される場合があります。
現在のページ以外のページに位置が解決される、または印刷にすでにレンダリングされた現在のページ上の位置に解決される絶対配置されたコンテンツについては、プリンターはコンテンツを以下のように配置する場合があります:
注意: 複数のページに分割されたブロックレベル要素は、各ページで異なる幅を持つ場合があり、デバイス固有の制限が存在する場合があります。
以下の文書で位置指定がない場合、包含ブロック（C.B.）は次のように確立されます:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>包含ブロックの説明</TITLE>
</HEAD>
<BODY id="body">
<DIV id="div1">
<P id="p1">これは最初の段落のテキストです...</P>
<P id="p2">これは<EM id="em1">2番目の<STRONG id="strong1">段落</STRONG>内</EM>のテキストです。</P>
</DIV>
</BODY>
</HTML>
次のように確立されます:
| ボックスが生成される対象 | C.B.が確立される対象 |
|---|---|
| html | 初期C.B.（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 }
包含ブロックの表は次のようになります:
| ボックスが生成される対象 | C.B.が確立される対象 |
|---|---|
| html | 初期C.B.（UA依存） |
| body | html |
| div1 | 初期C.B. |
| p1 | div1 |
| p2 | div1 |
| em1 | div1 |
| strong1 | em1 |
「em1」を位置指定することにより、その包含ブロックは最も近い位置指定された祖先ボックス（つまり、「div1」によって生成されたもの）になります。
| 名前: | width |
|---|---|
| 値: | <length> | <percentage> | auto | inherit |
| 初期値: | auto |
| 適用対象: | すべての要素。ただし、置換されないインライン要素、テーブル行、および行グループを除く |
| 継承: | no |
| パーセンテージ: | 包含ブロックの幅を基準とする |
| メディア: | ビジュアル |
| 計算値: | パーセンテージまたは『auto』は指定された通り、または絶対的な長さ |
このプロパティはボックスのコンテンツ幅を指定します。
このプロパティは置換されないインライン要素には適用されません。 置換されないインライン要素のボックスのコンテンツ幅は、内部のレンダリングされたコンテンツの幅（子要素の相対オフセット前）に基づきます。 インラインボックスは行ボックスに流れ込みます。 行ボックスの幅はその包含ブロックによって決まりますが、 フロートの存在によって短縮される場合があります。
値の意味は以下の通りです:
『width』に負の値を指定することは禁止されています。
例えば、以下のルールは段落のコンテンツ幅を100ピクセルに固定します:
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』で、要素が固有の比率を持ち、固有の高さまたは幅を持たない場合、 CSS 2.2では『width』の使用値は未定義です。ただし、包含ブロックの幅が置換要素の幅に依存しない場合、 『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』でなく、さらに 『border-left-width』 + 『padding-left』 + 『width』 + 『padding-right』 + 『border-right-width』 （および『margin-left』または『margin-right』が『auto』でない場合の値）が包含ブロックの幅を超える場合、 『margin-left』または『margin-right』の『auto』値は以下のルールに従い『0』として扱われます。
上記のすべてが『auto』以外の計算値を持つ場合、これらの値は「過剰制約」とされ、 いずれかの使用値が計算値と異なる必要があります。 包含ブロックの『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』の場合、その使用値は「収縮適合幅 (shrink-to-fit width)」になります。
収縮適合幅の計算は、自動テーブルレイアウトアルゴリズムを使用してテーブルセルの幅を計算する方法に似ています。 大まかに言えば、明示的な改行が発生する場所を除き、行を分割せずにコンテンツをフォーマットして希望する幅を計算し、 次に可能なすべての改行を試して希望する最小幅を計算します。 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』 の使用値はインライン置換要素と同様に決定されます。
このセクションおよび次のセクションの目的のために、用語「静的位置 (static position)」 （要素の）とは、概ね要素が通常フロー内にあった場合の位置を指します。より正確には:
ただし、実際にその仮想ボックスの寸法を計算するのではなく、ユーザーエージェントはそのおおよその位置を推測する自由があります。
静的位置を計算する目的では、固定配置された要素の包含ブロックはビューポートではなく初期包含ブロックと見なされ、 すべてのスクロール可能なボックスは原点にスクロールされていると仮定されるべきです。
これらの要素の使用値を決定する制約は次の通りです:
'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』プロパティが『ltr』の場合、 『left』を静的位置に設定し、以下のルール番号3を適用します。 それ以外の場合、『right』を静的位置に設定し、ルール番号1を適用します。
3つのいずれも『auto』でない場合: 『margin-left』および『margin-right』の両方が『auto』の場合、 2つのマージンが等しい値になるという追加の制約の下で方程式を解きます。 ただし、これによってマージンが負になる場合、包含ブロックの『direction』が『ltr』の場合は『margin-left』、 『rtl』の場合は『margin-right』を0に設定し、残りの値を解きます。 『margin-left』または『margin-right』のいずれかが『auto』の場合、その値を解きます。 値が過剰制約されている場合、『direction』が『rtl』の場合は『left』の値を無視し、 『ltr』の場合は『right』の値を無視して解きます。
それ以外の場合、『margin-left』および『margin-right』の『auto』値を0に設定し、次の6つのルールの1つを適用します。
収縮適合幅の計算は、自動テーブルレイアウトアルゴリズムを使用してテーブルセルの幅を計算する方法に似ています。 大まかに言えば、明示的な改行が発生する場所を除いて行を分割せずにコンテンツをフォーマットして希望する幅を計算し、 次に可能なすべての改行を試して希望する最小幅を計算します。 CSS 2.2では正確なアルゴリズムは定義されていません。 第三に、利用可能な幅を計算します。これは、ケース1では『left』を0に、ケース3では『right』を0に設定して『width』を解くことで求められます。
その後、収縮適合幅は次のように計算されます: min(max(希望する最小幅, 利用可能な幅), 希望する幅)。
この場合、10.3.7節が制約方程式を含む部分まで適用されますが、それ以外の部分は以下のルールに置き換えられます:
『width』 が『auto』の場合、使用値は浮動要素と同様に 収縮適合幅になります。
『margin-left』 または『margin-right』 の計算値が『auto』の場合、その使用値は『0』になります。
インライン置換要素とまったく同じです。
| 名前: | min-width |
|---|---|
| 値: | <length> | <percentage> | inherit |
| 初期値: | 0 |
| 適用対象: | すべての要素。ただし、置換されないインライン要素、テーブル行、および行グループを除く |
| 継承: | no |
| パーセンテージ: | 包含ブロックの幅を基準とする |
| メディア: | ビジュアル |
| 計算値: | 指定されたパーセンテージまたは絶対的な長さ |
| 名前: | max-width |
|---|---|
| 値: | <length> | <percentage> | none | inherit |
| 初期値: | none |
| 適用対象: | すべての要素。ただし、置換されないインライン要素、テーブル行、および行グループを除く |
| 継承: | no |
| パーセンテージ: | 包含ブロックの幅を基準とする |
| メディア: | ビジュアル |
| 計算値: | 指定されたパーセンテージ、絶対的な長さ、または『none』 |
これらの2つのプロパティは、コンテンツ幅を特定の範囲に制約することを可能にします。値の意味は以下の通りです:
『min-width』 および『max-width』 に負の値を指定することは禁止されています。
CSS 2.2では、テーブル、インラインテーブル、テーブルセル、テーブル列、列グループにおける『min-width』および『max-width』の効果は未定義です。
以下のアルゴリズムは、これらの2つのプロパティが『width』 プロパティの使用値にどのように影響を与えるかを説明しています:
これらのステップは、上記のプロパティの実際の計算値には影響を与えません。
ただし、固有比率を持つ置換要素で、『width』 および『height』が 両方とも『auto』に指定されている場合、アルゴリズムは以下の通りです:
違反した制約に対して解決された高さと幅の値を次の表から選択します。 max-widthおよびmax-heightをmax(min, max)として取り、それによりmin ≤ maxが成り立つようにします。 この表ではwとhは、『min-width』、『min-height』、『max-width』 および『max-height』プロパティを無視した状態での幅と高さの計算結果を示します。 通常、これらは固有幅と固有高さですが、固有比率を持つ置換要素の場合は異なる場合があります。
注意: 明示的な幅または高さが設定され、もう一方の次元が『auto』である場合、自動側に最小または最大制約を適用すると過剰制約の状況が発生する可能性があります。 仕様ではこの動作は明確ですが、著者が予期していない結果になる場合があります。このような場合、CSS3のobject-fitプロパティを使用して異なる結果を得ることができます。
| 制約違反 | 解決された幅 | 解決された高さ |
|---|---|---|
| なし | 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) and (h > max-height), where (max-width/w ≤ max-height/h) | max-width | max(min-height, max-width * h/w) |
| (w > max-width) and (h > max-height), where (max-width/w > max-height/h) | max(min-width, max-height * w/h) | max-height |
| (w < min-width) and (h < min-height), where (min-width/w ≤ min-height/h) | min(max-width, min-height * w/h) | min-height |
| (w < min-width) and (h < min-height), where (min-width/w > min-height/h) | min-width | min(max-height, min-width * h/w) |
| (w < min-width) and (h > max-height) | min-width | max-height |
| (w > max-width) and (h < min-height) | max-width | min-height |
その後、上記の「幅とマージンの計算」のルールを適用し、 『width』 がこの値として計算されたかのように処理します。
| 名前: | height |
|---|---|
| 値: | <length> | <percentage> | auto | inherit |
| 初期値: | auto |
| 適用対象: | すべての要素。ただし、置換されないインライン要素、テーブル列、および列グループを除く |
| 継承: | no |
| パーセンテージ: | 本文を参照 |
| メディア: | ビジュアル |
| 計算値: | 指定されたパーセンテージまたは『auto』、または絶対的な長さ |
このプロパティはボックスのコンテンツの高さを指定します。
このプロパティは置換されないインライン要素には適用されません。 代わりに使用されるルールについては、置換されないインライン要素の高さとマージンの計算に関するセクションを参照してください。
値の意味は以下の通りです:
注意: 絶対配置された要素の包含ブロックの高さは、要素自体のサイズに依存しないため、 このような要素におけるパーセンテージの高さは常に解決可能です。ただし、高さが文書内の後続の要素が処理されるまで判明しない場合があります。
『height』に 負の値を指定することは禁止されています。
例えば、以下のルールは段落のコンテンツの高さを100ピクセルに設定します:
p { height: 100px }
コンテンツの高さが100ピクセルを超える段落は、オーバーフロー プロパティに従って処理されます。
『top』、 『margin-top』、 『height』、 『margin-bottom』、 および『bottom』 の値を計算するために、さまざまな種類のボックスを区別する必要があります:
ポイント1-6および9-10の場合、『top』および『bottom』の使用値は9.4.3節のルールによって決定されます。
注意: これらのルールは他の要素と同様にルート要素にも適用されます。
注意。 以下で計算される『height』の使用値は暫定値であり、 『min-height』 および『max-height』 に応じて複数回計算される必要がある場合があります。以下の最小高さと最大高さのセクションを参照してください。
『height』 プロパティは適用されません。コンテンツ領域の高さはフォントに基づいて設定されるべきですが、この仕様ではその方法を指定していません。 ユーザーエージェントは例えばem-boxやフォントの最大アセンダーおよびディセンダーを使用することができます （後者はem-boxの上または下にある文字がコンテンツ領域内に収まることを確実にしますが、異なるフォントで異なるサイズのボックスになる可能性があります。 一方、前者は『line-height』に相対的な背景スタイリングを制御できることを確実にしますが、文字がコンテンツ領域の外に描画される可能性があります）。
注意: CSSのレベル3では、コンテンツの高さに使用されるフォントの測定基準を選択するプロパティが含まれる可能性があります。
インライン、置換されないボックスの垂直方向のパディング、ボーダー、およびマージンはコンテンツ領域の上端と下端から始まり、 『line-height』 とは関係がありません。ただし、行ボックスの高さを計算する際に使用されるのは 『line-height』 のみです。
複数のフォントが使用される場合（例えば、文字が異なるフォントで見つかる場合）、 コンテンツ領域の高さはこの仕様では定義されていません。ただし、以下のいずれかを満たすような高さを選択することを提案します: (1) すべてのフォントのem-box、または (2) すべてのフォントの最大アセンダーとディセンダー。 なお、これはフォントサイズの中で最も大きなものよりも大きくなる場合があり、フォントのベースラインの整列に依存します。
『margin-top』または『margin-bottom』が『auto』の場合、その使用値は0になります。
『height』 および 『width』 の計算値が両方とも『auto』で、要素に固有の高さがある場合、その固有の高さが 『height』 の使用値になります。
それ以外の場合、『height』 の計算値が『auto』で、要素に固有の比率がある場合、その使用値は次のように計算されます:
(使用される幅) / (固有の比率)
それ以外の場合、『height』 の計算値が『auto』で、要素に固有の高さがある場合、その固有の高さが 『height』 の使用値になります。
それ以外の場合、『height』 の計算値が『auto』で、上記の条件を満たさない場合、 『height』 の使用値は、2:1の比率を持ち、高さが150pxを超えず、デバイスの幅を超えない最大の矩形の高さに設定されます。
このセクションは、『overflow』が『visible』に計算されないがビューポートに伝播された場合の通常フロー内のブロックレベル置換されない要素にも適用されます。
『margin-top』または『margin-bottom』が『auto』の場合、その使用値は0になります。 『height』 が『auto』の場合、高さは要素がブロックレベルの子要素を持つかどうか、またパディングやボーダーを持つかどうかに依存します:
要素の高さは、以下のうち最初に該当する基準までの距離です:
通常フロー内の子要素のみが考慮されます（つまり、浮動ボックスや絶対配置されたボックスは無視され、相対配置されたボックスはオフセットを考慮せずに考慮されます）。 子ボックスは匿名ブロックボックスである場合があります。
このセクションおよび次のセクションの目的のために、「静的位置 (static position)」（要素の）とは、概ね要素が通常フロー内にあった場合の位置を指します。 より正確には、『top』の静的位置は、指定された『position』値が『static』であり、 指定された『float』が『none』であり、 指定された『clear』が『none』であった場合、その要素の最初のボックスとなるであろう仮想的なボックスの上マージンエッジまでの包含ブロックの上端からの距離です。 （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』のいずれかが『auto』の場合、その値を解きます。 値が過剰制約されている場合、『bottom』の値を無視してその値を解きます。
それ以外の場合、以下の6つのルールの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 |
| パーセンテージ: | 本文を参照 |
| メディア: | ビジュアル |
| 計算値: | 指定されたパーセンテージまたは絶対的な長さ |
| 名前: | max-height |
|---|---|
| 値: | <length> | <percentage> | none | inherit |
| 初期値: | none |
| 適用対象: | すべての要素。ただし、置換されないインライン要素、テーブル列、および列グループを除く |
| 継承: | no |
| パーセンテージ: | 本文を参照 |
| メディア: | ビジュアル |
| 計算値: | 指定されたパーセンテージ、絶対的な長さ、または『none』 |
これらの2つのプロパティは、ボックスの高さを特定の範囲に制約することを可能にします。値の意味は以下の通りです:
『min-height』 および『max-height』 に負の値を指定することは禁止されています。
CSS 2.2では、テーブル、インラインテーブル、テーブルセル、テーブル行、および行グループにおける『min-height』および『max-height』の効果は未定義です。
以下のアルゴリズムは、これらの2つのプロパティが『height』 プロパティの使用値にどのように影響を与えるかを説明しています:
これらのステップは『height』 の実際の計算値には影響を与えません。その結果、例えば、計算値に依存するマージン折りたたみには影響を与えません。
ただし、『width』 および『height』 の両方が『auto』に計算される置換要素の場合、使用幅と使用高さを見つけるために 「最小幅と最大幅」のセクションのアルゴリズムを使用します。 次に、それらを計算値として使用するかのように、 「高さとマージンの計算」のルールを適用します。
インラインフォーマットコンテキストのセクションで説明されているように、 ユーザーエージェントはインラインレベルボックスを行ボックスの垂直スタックに流し込みます。 行ボックスの高さは次のように決定されます:
空のインライン要素は空のインラインボックスを生成しますが、これらのボックスにはマージン、パディング、ボーダー、および行の高さがあり、 コンテンツを持つ要素と同様にこれらの計算に影響を与えます。
CSSは、すべてのフォントがベースライン上に特徴的な高さとその下に深さを指定するフォントメトリクスを持つことを前提としています。 このセクションでは、Aをその高さ（特定のフォントとサイズにおける）、 Dをその深さとし、AD = A + D、つまり上から下までの距離を定義します。 （TrueTypeおよびOpenTypeフォントにおけるAおよびDの見つけ方については、以下の注意を参照してください。） これらはフォント全体のメトリクスであり、特定のグリフのアセンダーやディセンダーに対応する必要はありません。
ユーザーエージェントは、非置換インラインボックス内のグリフを、関連するベースラインで互いに整列させる必要があります。 次に、各グリフについてAおよびDを決定します。 単一の要素内のグリフは異なるフォントから来る場合があり、すべてが同じ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を参照）。 したがって、異なるユーザーエージェントが背景やボーダーを異なる場所に描画する可能性があります。
注意。 OpenTypeまたはTrueTypeフォントを使用する実装では、 フォントのOS/2テーブルのメトリクス「sTypoAscender」および「sTypoDescender」をAおよびDとして使用することを推奨します （現在の要素のフォントサイズにスケーリングした後）。 これらのメトリクスがない場合、HHEAテーブルの「Ascent」および「Descent」メトリクスを使用するべきです。
| 名前: | line-height |
|---|---|
| 値: | normal | <number> | <length> | <percentage> | inherit |
| 初期値: | normal |
| 適用対象: | すべての要素 |
| 継承: | yes |
| パーセンテージ: | 要素自体のフォントサイズに基づきます |
| メディア: | ビジュアル |
| 計算値: | <length>および <percentage>の場合は絶対値、それ以外の場合は指定された値 |
ブロックコンテナ要素で内容がインラインレベルの要素で構成されている場合、'line-height'は要素内の行ボックスの最小の高さを指定します。最小の高さは、ベースラインの上の最小高さとその下の最小深さから構成されます。これは、各行ボックスが要素のフォントと行高さプロパティを持つ幅ゼロのインラインボックスで始まるかのように扱われます。この仮想ボックスを「ストラット」と呼びます（名前はTeXに由来します）。
フォントのベースライン上および下の高さと深さは、フォントに含まれるメトリクスであると想定されます。（詳細についてはCSSレベル3を参照してください。）
非置換のインライン要素では、'line-height'は行ボックスの高さ計算に使用される高さを指定します。
このプロパティの値には以下の意味があります:
以下の例の3つのルールは、同じ結果の行高さを持ちます:
div { line-height: 1.2; font-size: 10pt } /* 数値 */
div { line-height: 1.2em; font-size: 10pt } /* 長さ */
div { line-height: 120%; font-size: 10pt } /* パーセンテージ */
要素が複数のフォントでレンダリングされる場合、ユーザーエージェントは最大のフォントサイズに基づいて 'normal' の'line-height'値を決定することがあります。
注記。 すべてのインラインボックスが同じフォントであり、置換要素やインラインブロック要素などがない場合、'line-height'の値が順次の行のベースラインの間隔を正確に保証します。これは、異なるフォントで列を揃える必要がある場合（例: テーブル）に重要です。
| 名前: | vertical-align |
|---|---|
| 値: | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit |
| 初期値: | baseline |
| 適用対象: | インラインレベルおよび 'table-cell' 要素 |
| 継承: | いいえ |
| パーセンテージ: | 要素自体の 'line-height' を参照 |
| メディア: | 視覚 |
| 計算値: | <percentage> および <length> の場合は絶対長、それ以外の場合は指定された値 |
このプロパティは、インラインレベル要素によって生成されるボックスの行ボックス内の垂直位置に影響を与えます。
注記。 このプロパティの値は、テーブルの文脈では異なる意味を持ちます。詳細はテーブルの高さアルゴリズムのセクションを参照してください。
以下の値は、親インライン要素または親ブロックコンテナ要素のストラットに関連してのみ意味を持ちます。
以下の定義では、インライン非置換要素の場合、整列に使用されるボックスは 'line-height' の高さを持つボックス（ボックスのグリフと各側の半リーディングを含む、上記を参照）です。それ以外の要素では、整列に使用されるボックスはマージンボックスです。
以下の値は、行ボックスに対して要素を整列させます。要素にはそれに対して整列された子孫が含まれる場合があるため（その子孫にも整列された子孫が含まれることがあります）、これらの値は整列されたサブツリーの境界を使用します。インライン要素の整列されたサブツリーには、その要素と 'top' または 'bottom' 以外の計算 'vertical-align' 値を持つすべての子孫インライン要素の整列されたサブツリーが含まれます。整列されたサブツリーの上端はサブツリー内のボックスの上端の中で最も高いものであり、下端はそれに対応します。
'inline-table' のベースラインは、テーブルの最初の行のベースラインです。
'inline-block' のベースラインは、通常のフロー内の最後の行ボックスのベースラインですが、インフロー行ボックスがない場合、または 'overflow' プロパティの計算値が 'visible' 以外の場合、ベースラインは下端マージンエッジになります。