目次
要素が生成するボックスの位置及び大きさは、その要素の包含ブロック（containing block）と呼ばれる矩形を参照して計算することがある。 包含ブロックを以下の様に定義する:
配置体系の指定が無い状態で、以下の文書の包含ブロックは:
<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 | initial C.B |
| 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 }
前出の包含ブロックの表はこうなる:
| ボックスを生成する要素 | 包含ブロックを設定する要素 |
|---|---|
| body | initial C.B. |
| div1 | initial C.B. |
| p1 | div1 |
| p2 | div1 |
| em1 | div1 |
| strong1 | em1 |
em1要素を位置指定したので、その包含ブロックは位置指定された最も近い祖先ボックス（すなわちdiv1要素が生成するボックス）になっている。
| Value: | <length> | <percentage> | auto | inherit |
|---|---|
| Initial: | auto |
| Applies to: | all elements but non-replaced inline elements, table rows, and row groups |
| Inherited: | no |
| Percentages: | refer to width of containing block |
| Media: | visual |
このプロパティは、ブロック要素と置換要素の内容領域の幅を指定する。
このプロパティは、非置換インライン要素には適用できない。 なぜなら、非置換インライン要素のボックス幅は、（子供要素が相対位置指定される前の）表示済み内容の幅と同じになるからである。 インラインボックスは行ボックスの中に流し込まれるということを思い出して欲しい。 行ボックスは原則として包含ブロックと同じ幅になるが、浮動体のせいで幅が短くなる場合もあるのだ。
置換要素のボックス幅はその要素に内在している。 しかし、置換要素の'width'プロパティが'auto'以外の値を取る時、UAはその幅を伸縮させてもよい。
各値は以下の様な意味を持つ:
負の値は不正である。
たとえば、次の規則は段落の内容幅を100pxに固定している:
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'以外の値を取る時、それらの指定値は「制限しすぎ」であると言う。 そして、それらのプロパティのうち1つは、指定値とは異なる算出値を取る必要が生じる。 'direction'の値が'ltr'なら、'margin-right'の指定値が無視され、上の等式を満たすような算出値が与えられる。 'direction'の値が'rtl'なら、'margin-left'が同様の処理を受ける。
上に挙げたプロパティの指定値のうち、1つだけが'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になる）
この等式が解けるように、以下の過程を順に実行する:
これは1つ前の場合と似ている。 違っているのは対象の要素に内在寸法が存在する点である。 この相違点に基づいて、前の場合と同じ等式について以下の過程を実行する:
| Value: | <length> | <percentage> | inherit |
|---|---|
| Initial: | UA dependent |
| Applies to: | all elements except non-replaced inline elements and table elements |
| Inherited: | no |
| Percentages: | refer to width of containing block |
| Media: | visual |
| Value: | <length> | <percentage> | none | inherit |
|---|---|
| Initial: | none |
| Applies to: | all elements except non-replaced inline elements and table elements |
| Inherited: | no |
| Percentages: | refer to width of containing block |
| Media: | visual |
これらのプロパティを用いると、ボックスの幅を特定の範囲内に制限できる。 各値は以下の様な意味を持つ:
以下のアルゴリズムは、これら2つのプロパティが'width'の算出値に与える影響を示している:
UAは、'min-width'プロパティが取り得る負でない最小値をあらかじめ定めておいてもよい。 また、その最小値は要素によって、あるいは他のプロパティの値によって変化してもよい。 'min-width'の指定値がその最小値を下回る場合、UAはその最小値を算出値として用いることができる。
【訳注: ここでいう「最小値」は、'width'が取れる最小値のことではなく、'min-width'自体が取れる最小値のことです。】
| Value: | <length> | <percentage> | auto | inherit |
|---|---|
| Initial: | auto |
| Applies to: | all elements but non-replaced inline elements, table columns, and column groups |
| Inherited: | no |
| Percentages: | see prose |
| Media: | visual |
このプロパティは、ブロック要素と置換要素が生成するボックスの内容領域の高さを指定する。
このプロパティは、非置換インライン要素には効果を持たない。 非置換インライン要素の高さは'line-height'プロパティによって決まる。
各値は以下の様な意味を持つ:
負の値は不正である。
たとえば、次の規則は段落の高さを100pxに固定している:
P { height: 100px }
100px以上の高さを持つ段落はボックスからはみ出し、その扱いは'overflow'プロパティに従うことになる。
'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'ならば、算出値はその要素が子供ブロック要素を持つかどうかによって異なる。 その要素がインラインの子供要素のみを持つ場合、最上段にある行ボックスの上辺から、最下段にある行ボックスの下辺までの距離が、'height'の算出値になる。 その要素がブロックの子供要素を持つ場合、最上段にあるブロックボックスのマージン上辺から、最下段にあるブロックボックスのマージン下辺までの距離が、'height'の算出値になる。 この場合分けでは、通常フローにある子供要素のみを考える（つまり、浮動ボックスや絶対配置のボックスは無視して、相対配置のボックスは位置指定されていない状態で考える）。 また、匿名ボックスも子供ボックスの1つとして考えるということに注意すること。
各プロパティの算出値は以下の等式に従う:
'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = 包含ブロックの高さ （ボーダーの種類が'none'である場合、ボーダーの幅は0になる）
この等式が解けるように、以下の過程を順に実行する:
これは1つ前の場合と似ている。 違っているのは対象の要素に内在寸法が存在する点である。 この相違点に基づいて、前の場合と同じ等式について以下の過程を実行する:
要素の高さをある範囲内に制限できるというのは時として便利である。 次の2つのプロパティがその機能を提供する:
| Value: | <length> | <percentage> | inherit |
|---|---|
| Initial: | 0 |
| Applies to: | all elements except non-replaced inline elements and table elements |
| Inherited: | no |
| Percentages: | refer to height of containing block |
| Media: | visual |
| Value: | <length> | <percentage> | none | inherit |
|---|---|
| Initial: | none |
| Applies to: | all elements except non-replaced inline elements and table elements |
| Inherited: | no |
| Percentages: | refer to height of containing block |
| Media: | visual |
これらのプロパティを用いると、ボックスの高さをある範囲内に制限できる。 各値は以下の様な意味を持つ:
以下のアルゴリズムは、これら2つのプロパティが'height'の算出値に与える影響を示している:
[9.4.2 インラインの整形コンテキスト]に示した通り、UAは縦に積み重ねた行ボックスの中にインラインボックスを流し込む。 その行ボックスの高さは次の様にして決める:
内容を持たないインライン要素でもインラインボックスを生成するし、これらのボックスもマージン、ボーダー、パディングや行の高さを有している。 したがって、空要素も通常の要素と同様に上の計算へ影響を与える。
行ボックス内にあるすべてのボックスが下辺揃えになっていれば、行ボックスの高さは最も高いインラインボックスの高さと同じになる。 しかし、ボックスがベースライン揃えになっている場合は、行ボックスの上辺と下辺が、最も高いインラインボックスの上辺と下辺に揃うとは限らない。
インラインボックスの高さがフォントサイズと同じになるとは限らない（たとえば'line-height'の値が'1em'より大きい場合など）ので、表示されたグリフの上下にスペースを設ける必要が出てくる。 'line-height'の算出値とフォントサイズの差を行間（leading）と呼ぶ。 また、行間の半分を半行間（half-leading）と呼ぶ。
UAは、インラインボックス内のグリフを縦の中央揃えにし、上下に半行間分のスペースを挿入する。 たとえば、フォントサイズが'12pt'で'line-height'の値が'14pt'だとすると、2pt分のスペースが上下に1ptずつ挿入されることになる。 （空要素の場合も、無限に小さい文字があると考えて同様に処理する）
'line-height'の値が文字サイズより小さいと、最終的なインラインボックスの高さは文字サイズより小さくなり、グリフの表示はボックスの外側へはみ出すことになる。 更に、そのボックスが行ボックスの上辺か下辺に接していると、グリフの表示は隣の行ボックスへ侵入することになる。
非置換インラインボックスの高さを計算するのに、マージン、ボーダー、パディングなどの値は使わないが、それらの領域はやはりインラインボックスの周囲に表示される。 したがって、行ボックスの高さが、内部にあるインラインボックスの外辺よりも短い場合、パディングやボーダーの背景（色）は、隣接する行ボックスへはみ出してしまう。 しかしこの場合、UAは行ボックス外部のパディングやボーダーを切り落としても良い（つまり表示しなくても良い）。
| Value: | normal | <number> | <length> | <percentage> | inherit |
|---|---|
| Initial: | normal |
| Applies to: | all elements |
| Inherited: | yes |
| Percentages: | refer to the font size of the element itself |
| Media: | visual |
このプロパティをインライン要素から成るブロック要素に設定すると、各インラインボックスの高さの最小値を指定できる。
このプロパティをインライン要素に設定すると、その要素が生成するボックスの正確な高さを指定できる。 ただし置換インライン要素の場合は例外で、ボックスの高さは'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 */
要素が複数のフォントサイズで表示される場合、UAは最も大きいフォントサイズに合わせて'line-height'の値を決めるべきである。
一般に1つの段落内では、すべてのインラインボックスを通じて'line-height'の値は1種類しか出現しない。 したがって、連続する行のベースライン間距離は、正確に'line-height'の値と等しくなることが保証されるだろう。 このことは、表などのように、列ごとで異なるフォントを用いたテキストを揃えなければならない場合には、重要になってくる。
置換要素にも'font-size'や'line-height'の値があるということに注意せよ。 その値が直接ボックスの高さに関わらないにしても、'font-size'の値は「em」や「ex」を定義するのに用いられるし、'line-height'の値は'vertical-align'のパーセント値を計算するのに用いられるのである。
| Value: | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit |
|---|---|
| Initial: | baseline |
| Applies to: | inline-level and 'table-cell' elements |
| Inherited: | no |
| Percentages: | refer to the 'line-height' of the element itself |
| Media: | visual |
このプロパティは、行ボックス内における、インラインボックスの垂直方向の位置を指定する。 以下の値は、親インライン要素、あるいは匿名インラインボックスを生成する親ブロック要素を参照できる場合にのみ意味を持つ。 そのような親を持たない要素に対しては何の効果も無い。
注。 このプロパティの値は、表関連要素と一緒に用いる場合にはやや意味が違ってくる。 詳細は[17.5.3 表の高さを計算する]を参照のこと。
以下の値は、そのボックスが含まれている行ボックスを参照する: