10 視覚フォーマットモデルの詳細

10.1 "包含ブロック"の定義

要素のボックスの位置及びサイズは,一定の長方形に関連して計算されることが 多い。この長方形を要素の包含ブロックと呼ぶ。 要素の包含ブロックの定義を次に示す。

  1. 内部にルート要素が存在している,初期ブロックと呼ばれる包含ブロックは,利用者エージェントが包含ブロックを選択する。
  2. その他の要素については,要素が絶対位置決めされない場合,包含ブロックは,最も近接するブロックレベルの先祖ボックスによって形成される。
  3. 要素が'position: fixed'という値をもつ場合,包含ブロックは,表示域によって設定される。
  4. 要素が'position: absolute'という値をもつ場合,包含ブロックは,最も近接する先祖によって,次の方法で設定される。この場合の先祖は,'static'以外の'position'をもつ。
    1. 先祖がブロックレベルである場合は,包含ブロックは,先祖のパディング辺によって形成される。
    2. 先祖が行内レベルである場合,包含ブロックは,先祖の'direction'特性に依存する。
      1. 'direction'が'ltr'である場合,包含ブロックの上辺及び左辺は,先祖が生成する最初のボックスの内容上辺及び内容左辺とし,下辺及び右辺は,先祖の最後のボックスの内容下辺及び内容右辺とする。
      2. 'direction'が'rtl'である場合,上辺及び右辺は,先祖が生成する最初のボックスの上辺及び右辺とし,下辺及び左辺は,先祖の最後のボックスの内容下辺及び内容左辺とする。

    これらの先祖が存在しない場合,ルート要素のボックスの内容辺が包含ブロックを設定する。

次の文書の,位置指定がない包含ブロックをその次に示す。

<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-依存)
div1body
p1div1
p2div1
em1p2
strong1p2

"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初期包含ブロック
p1div1
p2div1
em1div1
strong1em1

"em1"を位置指定することによって,その包含ブロックは,位置指定された最も近接する先祖ボックス,すなわち,"div1"によって生成されるボックスとなる。

10.2 内容幅('width'特性)

'width'
値:  <length> | <percentage> | auto | inherit
初期値:  auto
適用対象:  非置換の行内要素, 表行及び行集合を除くすべての要素
継承:  しない
パーセント値:  包含ブロックの 幅を参照
メディア:  視覚メディア

この特性は,ブロックレベル要素及び置換要素が生成するボックスの内容幅を指定する。

この特性は,非置換の行内レベル要素には適用されない。非置換の行内要素のボックス幅は,子供が相対位置指定されるの内部でレンダリングされる内容の幅とする。行内ボックスが行ボックスに流れ込むことを思い出すこと。行ボックスの幅は,包含ブロックによって提供されるが,浮動体が存在する場合は,縮小されてもよい。

置換要素のボックスの幅は要素固有であって,この特性の値が'auto'以外である場合は,利用者エージェントが置換要素のボックス幅を変倍してもよい。

値には次の意味がある。

<length>
固定幅を指定する。
<percentage>
パーセント幅を指定する。パーセントは,生成ボックスの包含ブロックの幅に関して計算される。
auto
幅は,他の特性の値に依存する。以下の記述を参照のこと。

'width'に負の値を適用することは不当とする。

例えば,次の規則は,段落の内容幅を100画素に固定している。

P { width: 100px }

10.3 幅及びマージンの計算

要素の'width'特性,'margin-left'特性,'margin-right'特性,'left'特性及び'right'特性の計算値は,生成されるボックスの型及び互いの値に依存する。原則として'auto'を適切な値で置換して,計算値が指定値と同じになるようにするが,例外もある。次の状況を区別する必要がある。

  1. 行内非置換要素
  2. 行内置換要素
  3. 通常のフローにあるブロックレベル非置換要素
  4. 通常のフローにあるブロックレベル置換要素
  5. 浮動非置換要素
  6. 浮動置換要素
  7. 絶対位置決めされる非置換要素
  8. 絶対位置決めされる置換要素

1〜6は,相対位置決めを含む。

10.3.1 行内非置換要素

'width'特性は適用されない。'left''right''margin-left'又は'margin-right'の指定値が'auto'の場合は,計算値は'0'となる。

10.3.2 行内置換要素

'left''right''margin-left'又は 'margin-right'の指定値が'auto'の場合は,計算値は'0'となる。'width'の指定値が'auto'の場合は,計算値は要素の要素固有の幅となる。

10.3.3 通常のフローの中のブロックレベル非置換要素

'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'である場合,両者の計算値は同じとなる。

10.3.4 通常のフローの中のブロックレベル置換要素

'left'又は'right'が'auto'である場合,計算値は0とする。'width'が'auto'として指定される場合,その値は要素の要素固有の幅とする。マージンの一つが'auto'である場合,計算値は,上の等式によって提供される。さらに両マージンとも'auto'である場合,計算値は等しい。

10.3.5 浮動非置換要素

'left''right''width''margin-left'又は'margin-right'が'auto'として指定される場合,計算値は'0'とする。

10.3.6 浮動置換要素

'left''right''margin-left'又は'margin-right'が'auto'として指定される場合,計算値は'0'とする。'width'が'auto'である場合,その値は要素の要素固有の幅とする。

10.3.7 絶対位置決めされる非置換要素

絶対位置決めされる非置換要素の計算値を決定する制約を次に示す。

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = 包含ブロックの幅

境界スタイルが'none'である場合は,境界幅として'0'を使用すること。次の順序で置換を行うことによって,この制約の解に到達する。

  1. 'left'が'auto'という値をもち,'direction'が'ltr'である場合は,包含ブロックの左辺から,'position'特性を'static'とした場合の要素の最初のボックスとなる仮定ボックスの左マージン辺までの距離で,'auto'を置換する。しかし,利用者エージェントは,その仮定ボックスを実際には計算せずに可能な位置を推測してもよい。仮定ボックスが包含ブロックより左にある場合は,値は負とする。
  2. 'right'が'auto'という値をもち,'direction'が'rtl'である場合は,包含ブロックの右辺から1.と同じ仮定ボックスの右マージン辺までの距離で'auto'を置換する。仮定ボックスが包含ブロックより左にある場合は,値は正とする。
  3. 'width'が'auto'である場合は,'left'又は'right'の残りの'auto'をすべて'0'で置換する。
  4. 'left''right'又は'width'が'auto'である場合は,'margin-left'又は'margin-right'の'auto'をすべて'0'で置換する。
  5. この時点で'margin-left''margin-right'もまだ'auto'である場合は,二つのマージンが同じ値をもたなければならないという付加的な制約のもとで,等式を解く。
  6. この時点で'auto'が一つだけ残っている場合は,その値について等式を解く。
  7. この時点で値が制約し過ぎである場合は,'left'('direction'が'rtl'の場合)又は'right'('direction'が'ltr'の場合)のいずれかの値を無視し,その値について等式を解く。

10.3.8 絶対位置決めされる置換要素

この状況は,10.3.7と類似しているが,要素が要素固有の幅をもつ場合は例外とする。置換の順序を次に示す。

  1. 'width'が値'auto'である場合,その値を要素の要素固有の幅に置換する。
  2. 'left'が'auto'という値をもち,'direction'が'ltr'である場合は,包含ブロックの左辺から,'position'特性を'static'とした場合の要素の最初ボックスとする仮定ボックスの左マージン辺までの距離で,'auto'を置換する。しかし,利用者エージェントはその仮定ボックスを実際には計算せずに可能な位置を推測してもよい。仮定ボックスが包含ブロックより左にくる場合は,値は負とする。
  3. 'right'が'auto'という値をもち,'direction'が'rtl'である場合は,包含ブロックの右辺から2.と同じ仮定ボックスの右マージン辺までの距離で'auto'を置換する。仮定ボックスが包含ブロックの辺より左にくる場合は,値は正とする。
  4. 'left'又は'right'が'auto'である場合は,'margin-left'又は'margin-right'のすべての'auto'を'0'で置換する。
  5. この時点で'margin-left''margin-right'もまだ'auto'である場合は,二つのマージンが同じ値とならなければならないという付加的な制約のもとで,等式を解く。
  6. この時点で'auto'が一つだけ残っている場合は,その値について等式を解く。
  7. この時点で値が制約し過ぎである場合は,'left'('direction'が'rtl'の場合)又は'right'('direction'が'ltr'の場合)のいずれかの値を無視し,その値について等式を解く。

10.4 最小幅及び最大幅( 'min-width'及び'max-width')

'min-width'
値:  <length> | <percentage> | inherit
初期値:  UAに依存
適用対象:  行内非置換要素及び表要素を除くすべての要素
継承:  しない
パーセント値:  包含ブロックの幅を参照
メディア:  視覚メディア
'max-width'
値:  <length> | <percentage> | none | inherit
初期値:  none
適用対象:  行内非置換要素及び表要素を除くすべての要素
継承:  しない
パーセント値:  包含ブロックの幅を参照
メディア:  視覚メディア

これら二つの特性によって,文書作成者は,ボックスの幅を一定の範囲に制限することができる。値には次の意味がある。

<length>
固定された最小又は最大の計算された幅を指定する。
<percentage>
計算値を決定するためにパーセントを指定する。パーセントは,生成されたボックスの包含ブロックの幅に関して計算される。
none
この値は,'max-width'だけに使用できる。ボックスの幅に制限はない。

次のアルゴリズムは,二つの特性が'width'特性の計算値にどのように影響するかを示す。

  1. 幅は,'min-width'及び'max-width'を用いずに,10.3の"幅及びマージンの計算"に基づく規則に従って計算される。
  2. 'min-width'の計算値が'max-width'の値より大きい場合は,'max-width'は,'min-width'の値に設定される。
  3. 計算幅が'max-width'より大きい場合は,10.3の規則が再度適用されるが,今度は'max-width'の値を'width'の指定値として使用する。
  4. 計算幅が'min-width'よりも小さい場合は,10.3の規則が再度適用されるが,今度は'min-width'の値を'width'の指定値として使用する。

利用者エージェントは,'min-width'特性に対して負ではない最小値を定義してよい。この値は要素ごとに変化したり,他の特性に依存してもよい。'min-width'がこの制限下にある場合,'min-width'が明示的に設定されているか,又は'min-width'が'auto'であって以下の規則により小さくなり過ぎるか,のいずれかの理由によって,利用者エージェントは,最小値を計算値として使用してよい。

10.5 内容の高さ('height'特性)

'height'
値:  <length> | <percentage> | auto | inherit
初期値:  auto
適用対象:  行内非置換要素,表要素及び列集合を除くすべての要素
継承:  しない
パーセント値:  説明参照
メディア:  視覚メディア

この特性は,ブロックレベル要素及び置換要素が生成するボックスの内容の高さを指定する。

この特性は,非置換行内レベル要素には適用されない。行内非置換要素のボックスの高さは,要素の(継承される可能性がある)'line-height'値によって提供される。

値には次の意味がある。

<length>
固定された高さを指定する。
<percentage>
高さをパーセントで指定する。パーセントは,生成されたボックスの包含ブロックの高さに関して計算される。包含ブロックの高さが明示的に指定されない場合,すなわち,内容の高さに依存する場合は,値は'auto'と同様に解釈される。
auto
高さは他の特性の値に依存する。以下の説明を参照すること。

'height'に対する負の値は,不当とする。

例えば,次の規則は,段落の高さを100画素に固定する。

P { height: 100px }

100画素以上の高さを必要とする段落は,'overflow'特性に従ってオーバフローする。

10.6 高さ及びマージンの計算

'top''margin-top''height''margin-bottom'及び'bottom'の値を計算するためには,次の様々な種類のボックスを区別しなければならない。

  1. 行内非置換要素
  2. 行内置換要素
  3. 通常のフローにあるブロックレベル非置換要素
  4. 通常のフローにあるブロックレベル置換要素
  5. 浮動非置換要素
  6. 浮動置換要素
  7. 絶対位置決めされる非置換要素
  8. 絶対位置決めされる置換要素

1〜6は,相対位置決めを含む。

10.6.1 行内非置換要素

'top''bottom''margin-top'又は'margin-bottom'が'auto'である場合,計算値は0とする。'height'特性は適用されないが,ボックスの高さは'line-height'特性によって与えられる。

10.6.2 行内置換要素,通常のフローにあるブロックレベル置換要素及び浮動置換要素

'top''bottom''margin-top'又は'margin-bottom'が'auto'である場合,計算値は0とする。'height'が 'auto'である場合,計算値は要素固有の高さとする。

10.6.3 通常のフローにあるブロックレベル非置換要素及び浮動非置換要素

'top''bottom''margin-top'又は'margin-bottom'が'auto'である場合,計算値は0とする。'height'が'auto'である場合,高さは,要素がブロックレベルの子供をもつかどうかに依存する。要素が行内レベルの子供だけをもつ場合は,高さは,最上部の行ボックスの上辺から最下部の行ボックスの下辺までの距離とする。要素がブロックレベルの子供をもつ場合は,高さは,最上部ブロックレベルの子ボックスの境界上辺から,最下部ブロックレベルの子ボックスの境界下辺までとする。考慮するのは通常のフローにおける子供に限る。すなわち,浮動ボックス及び絶対位置決めボックスは無視され,相対位置決めされたボックスは,位置指定がないものとして考慮される。子ボックスが匿名ボックスであってもよい点に注意すること。

10.6.4 絶対位置決めされる非置換要素

絶対位置決め要素に対しては,上下方向の寸法は,次の制約を満足しなければならない。

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = 包含ブロックの高さ

境界スタイルが'none'である場合は,境界幅として'0'を使用すること。この制約の解は,次の順序で置換を実施する。

  1. 'top'が値'auto'をもつ場合は,包含ブロックの上辺から,'position'特性を'static'とする要素の最初のボックスである仮定ボックスの上マージン辺までの距離で,'auto'を置換する。しかし,利用者エージェントは実際にそのボックスを計算せずに可能な位置を推測してもよい。仮定ボックスが包含ブロックより上にある場合は,値は負とする。
  2. 'height'及び'bottom'の両方が'auto'である場合,'bottom'を0で置換する。
  3. 'bottom'又は'height'がまだ'auto'である場合は,'margin-top'又は'margin-bottom'における'auto'をすべて'0'で置換する。
  4. この時点で'margin-top'及び'margin-bottom'の両方ともまだ'auto'である場合は,これら二つのマージンが同じ値をとらなければならないという制約のもとで,等式を解く。
  5. この時点で'auto'がただ一つしか残っていない場合は,その値について等式を解く。
  6. この時点で値が制約し過ぎである場合は,'bottom'の値を無視し,その値について等式を解く。

10.6.5 絶対位置決めされる置換要素

この状況は,要素が要素固有の高さをもつこと以外は,10.6.4の状況に類似している。置換の順序を次に示す。

  1. 'height'が'auto'である場合,'auto'を要素の要素固有の高さで置換する。
  2. 'top'の値が'auto'である場合,包含ブロックの上辺から,'position'特性を'static'とした場合の要素の最初のボックスである仮定ボックスの上マージン辺までの距離で,'auto'を置換する。しかし,利用者エージェントは実際にその仮定ボックスを計算せずに,可能な位置を推測してもよい。仮定ボックスが包含ブロックより上にある場合は,値は負とする。
  3. 'bottom'が'auto'である場合は,'margin-top'又は'margin-bottom'の'auto'をすべて'0'で置換する。
  4. この時点で'margin-top'及び'margin-bottom'の両方ともまだ'auto'である場合は,これら二つのマージンが同じ値をとらなければならないという制約のもとで,等式を解く。
  5. この時点で'auto'が一つだけ残っている場合は,その値について等式を解く。
  6. この時点で値が制約し過ぎである場合は,'bottom'の値を無視し,その値について等式を解く。

10.7 最小の高さ及び最大の高さ('min-height' 及び 'max-height')

要素の高さを一定の範囲に制限することが有用なこともある。次の二つの特性は,この機能を提供する。

'min-height'
値:  <length> | <percentage> | inherit
初期値:  0
適用対象:  非置換要素及び表要素を除くすべての要素
継承:  しない
パーセント値:  包含ブロックの高さを参照
メディア:  視覚メディア
'max-height'
値:  <length> | <percentage> | none | inherit
初期値:  none
適用対象:  非置換要素及び表要素を除くすべての要素
継承:  しない
パーセント値:  包含ブロックの高さを参照
メディア:  視覚メディア

これら二つの特性によって,文書作成者は,ボックスの高さを一定の範囲に制限することができる。値には次の意味がある。

<length>
固定の最小又は最大の計算された高さを指定する。
<percentage>
計算値を決定するためにパーセントを指定する。パーセントは生成されるボックスの包含ブロックの高さに関して計算される。包含ブロックの高さが明示的に指定されない場合,すなわち,内容の高さに依存する場合は,パーセント値は'auto'と同様に解釈される。
none
この値は,'max-height'だけに使用できる。ボックスの高さには制限がない。

次のアルゴリズムは,これら二つの特性が'height'特性の計算値にどのように影響するかを示している。

  1. 高さは,'min-height'及び'max-height'を用いずに,10.6の"高さ及びマージンの計算"に基づく規則に従って計算される。
  2. 'min-height'の計算値が'max-height'の値よりも大きい場合は,'max-height'は,'min-height'の値に設定される。
  3. 計算値が'max-height'より大きい場合は,10.6の規則が再度適用されるが,今度は'max-height'の値を'height'の指定値として使用する。
  4. 計算された高さが'min-height'より小さい場合は,10.6の規則が再度適用されるが,今度は'min-height'の値を'height'の指定値として使用する。

10.8 行の高さの算出('line-height'特性及び'vertical-align'特性)

行内フォーマット化文脈で示したとおり,利用者エージェントは,上下に積み重ねた行ボックスに行内ボックスを流し込む。行ボックスの高さの決定方法は次による。

  1. 行ボックスの中の各行内ボックスの高さを算出する("高さ及びマージンの計算"及び'line-height'特性を参照)。
  2. 行内ボックスを'vertical-align'特性に従って,上下方向に揃える。
  3. 行ボックスの高さは,最上部のボックス上辺と最下部のボックス下辺との間の距離とする。

空の行内要素は空の行内ボックスを生成するが,これらのボックスは,まだ,マージン,パディング,境界及び行の高さをもち,内容をもつ要素と同様にこれらの計算に影響を及ぼす。

行ボックスの中にあるすべてのボックスが下辺に揃えられている場合,行ボックスの高さは,最も高いボックスの高さと正確に一致することに注意すること。しかし,ボックスが共通基底線に揃えられている場合は,行ボックスの上辺及び下辺は,最も高いボックスの上辺及び下辺に重ならなくともよい。

10.8.1 リーディング及び半リーディング

行内ボックスの高さは,'line-height' > 1emなど,ボックスのテキストのフォントサイズとは異なってもよいので,レンダリングされるグリフの上下にスペースが存在してもよい。フォントサイズと'line-height'の計算値との差を,リーディングと呼ぶ。リーディングの半分を半リーディングと呼ぶ。

利用者エージェントは,行内ボックスの中でグリフを上下方向の中央揃えにし,上下に半リーディング分のスペースを挿入する。例えば,テキストの高さが'12pt'であって,'line-height'値が'14pt'である場合は,2pt分のスペースが上下に1ptずつ挿入することが望ましい。空ボックスには無限に小さい文字があると考えて,空ボックスにもこれを適用する。

'line-height'値がフォントサイズよりも小さい場合は,最終的な行内ボックスはフォントサイズより小さくなり,レンダリングされるグリフはボックスの外側に"はみ出す"。そのようなボックスが行ボックスの辺に接触する場合には,レンダリングされるグリフは,隣接する行ボックスにも"はみ出す"。

非置換要素のマージン,境界及びパディングは,行内ボックスの高さの計算には入れず,そこで行ボックスの計算にも入れないが,それでもそれらの領域は行内ボックスの周囲にレンダリングされる。これは,行ボックスの高さが含まれるボックスの外辺より短い場合に,パディング及び境界の背景及び色は,隣接する行ボックスへと"はみ出す"ことがあってもよい,ことを意味する。しかし,この場合,行ボックスを使用して,境界領域及びパディング領域を"切り取る",すなわち,それらをレンダリングしない利用者エージェントがあってもよい。

'line-height'
値:  normal | <number> | <length> | <percentage> | inherit
初期値:  normal
適用対象:  すべての要素
継承:  する
パーセント値:  要素自体のフォントサイズを参照
メディア:  視覚メディア

内容が行内レベル要素から構成されるブロックレベル要素においてこの特性が設定され場合,この特性は,各々の生成された行内ボックスの最小の高さを指定する。

この特性が行内レベル要素で設定される場合,この特性は,その要素が生成する各ボックスの正確な高さを指定する。ただし置換行内要素は例外であって,その場合には,ボックスの高さは,'height'特性によって提供される。

この特性の値には次の意味がある。

normal
計算値を要素のフォントサイズに基づく"適切な"値に設定することを利用者エージェントに知らせる。この値には,<number>と同じ意味がある。'normal'に対しては,1.0〜1.2の計算値を推奨する。
<length>
ボックスの高さは,この長さに設定される。負の値は不正とする。
<number>
この数値を要素のフォントサイズと掛け合わせて 計算値とする。負の値は不正とする。しかし,継承には計算値ではなく指定値を使用する。
<percentage>
このパーセントを要素のフォントサイズと掛け合わせて計算値とする。負の値は不正とする。

例:

次の例における三つの規則は,結果として同じ行の高さになる。

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'特性で使用される。

'vertical-align'
値:  baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
初期値:  baseline
適用対象:  行内レベル要素及び'table-cell'要素
継承:  しない
パーセント値:  要素自体の'line-height'を参照
メディア:  視覚メディア

この特性は,行ボックス内部において行内レベル要素が生成するボックスの上下位置決めに影響する。その要素が匿名行内ボックスを生成する場合,次の値は,親行内レベル要素又は親ブロックレベル要素を参照できる場合にだけ意味がある。それら親が存在しない場合は,効果はない。

備考  表の文脈では,この特性の値には若干異なる意味がある。詳細については,表の高さのアルゴリズムを参照のこと。

baseline
ボックスの基底線を親ボックスの基底線に揃える。ボックスに基底線がない場合は,親の基底線にボックスの下辺を揃える。
middle
ボックスの中央線を親ボックスの基底線から親のx-heightの半分だけ上に揃える。
sub
ボックスの基底線を親ボックスの下付き添字の適正な位置まで下げる。この値は,要素のテキストのフォントサイズに影響しない。
super
ボックスの基底線を親ボックスの上付き添字の適正な位置まで上げる。この値は,要素のテキストのフォントサイズには影響しない。
text-top
ボックスの上辺を親要素のフォントの上辺に揃える。
text-bottom
ボックスの下辺を親要素のフォントの下辺に揃える。
<percentage>
パーセント値を'line-height'値に掛け合わせた距離だけ,ボックスを上げたり(正値の場合),下げたり(負値の場合)する。'0%'値は,'baseline'と同じ意味とする。
<length>
指定した長さ分だけボックスを上げたり(正値の場合),下げたり(負値の場合)する。'0cm'値は,'baseline'と同じ意味とする。

残りの値は,生成されたボックスが出現する行ボックスを参照する。

top
行ボックスの上辺とボックスの上辺とを揃える。
bottom
行ボックスの下辺とボックスの下辺とを揃える。