10 視覚整形モデル詳細

目次

注: この仕様の複数の節は、他の仕様によって更新されている。置換された仕様および節のリストの詳細は、最新のCSS Snapshotにおける"Cascading Style Sheets (CSS) — 公式の定義"を参照されたい。

CSS Working Groupはまた、CSS level 2 revision 2 (CSS 2.2).を開発している。

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

要素のボックスの位置および大きさは、その要素の包含ブロックと呼ばれる矩形を参照して計算される。要素の包含ブロックは以下のように定義される:

  1. ルート要素にある包含ブロックは、初期包含ブロックと呼ばれる長方形である。連続メディアの場合、初期包含ブロックはビューポートの次元を持ち、キャンバスの原点で固定される。ページメディアの場合、初期包含ブロックはページ領域である。初期包含ブロックの'direction'プロパティは、ルート要素と同じである。
  2. 他の要素において、要素の配置が'relative'または'static'の場合、包含ブロックは最も近いブロックコンテナ先祖ボックスの内容辺によって整形される。
  3. 要素が'position: fixed'を持つ場合、包含ブロックは、連続メディアの場合にビューポートによって、またはページメディアの場合にページ領域によって設置される。
  4. 要素が'position: absolute'を持つ場合、包含ブロックは'absolute'、'relative'または'fixed'の'position'をもつ最も近い先祖によって以下の方法で設置される:
    1. 先祖がインライン要素である場合、包含ブロックは、その要素に対して生成される最初と最後のパディングボックスの周りの境界ボックスである。CSS 2.1において、インライン要素が複数行にわたって分割される場合、包含ブロックは未定義である。
    2. そうでなければ、包含ブロックは、先祖のパディング辺によって整形される。

    そのような先祖がない場合、包含ブロックは初期包含ブロックとなる。

ページメディアにおいて、絶対配置される要素は、任意のページ改行を(あたかも文書が連続であるかのように)無視するその要素の包含ブロックに関して配置される。要素は、その後複数のページに分割されてもよい。

レイアウトされている(現在のページ)以外のページ上の位置を解決する、またはすでに印刷のために描画されている現在のページの位置を解決する絶対配置されるコンテンツのために、プリンタはコンテンツを配置してもよい

複数のページに分割されるブロックレベル要素は各ページで異なる幅を持ってもよく、デバイス特性による制限を受けてもよいことに注意する。

例:

配置なしで、以下の文書の包含ブロックは:

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

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

"em1"の位置指定によって、その包含ブロックは最も近い位置指定される祖先ボックスになる(すなわち、"div1"によって生成される)。

10.2 コンテンツの幅'width'プロパティ

'width'
値:  <length> | <percentage> | auto | inherit
初期値:  auto
適用対象:  非置換インライン要素、テーブル列と列グループを除く全要素
継承:  no
パーセンテージ:  包含ブロックを含む幅を参照
メディア:  visual
算出値:  パーセンテージまたは'auto'として指定または絶対長さ

このプロパティはボックスのコンテンツ幅を指定する。

このプロパティは、非置換インライン要素に適用しない。非置換インライン要素のボックス幅は、その要素の中で(任意の子供の相対オフセットの前の)表示済みコンテンツの幅である。インラインボックスは、行ボックスにフローすることを思い出すこと。行ボックスの幅は包含ブロックによって与えられるが、浮動体の存在によって短縮されてもよい。

値は次の意味を持つ:

<length>
長さの単位を用いてコンテンツ領域の幅を指定する。
<percentage>
パーセント幅を指定する。割合は、生成ボックスの包含ブロックの幅に対して計算される。包含ブロックの幅がこの要素の幅に依存する場合、その結果のレイアウトはCSS 2.1で未定義である。注:絶対配置要素の包含ブロックはブロックコンテナ要素を基にするため、割合はその要素のパディングボックスの幅に対して計算される。これは、パーセント幅が親要素のコンテンツボックスに対して常に計算されていたCSS1からの変更である。
auto
幅は他のプロパティ値に依存する。以下の節を参照のこと。

'width'に対する負の値は不正である。

例:

たとえば、次の規則は段落のコンテンツ幅を100pxに固定する:

p { width: 100px }

10.3 幅とマージンの計算

レイアウトに使用されるようなある要素の'width''margin-left''margin-right''left'および'right'プロパティの値は、生成されるボックスの種類および互いの値に依存する。(レイアウトに使用される値はしばしば使用値とも呼ばれる。)原則として、使用される値は、算出値と同じであり、一部の適切な値によって置き換えられた'auto'をもち、包含ブロックに基づいて計算された割合であるが、例外がある。以下の状況は区別される必要がある:

  1. 非置換インライン要素
  2. 置換インライン要素
  3. 通常フローにおける非置換ブロックレベル要素
  4. 通常フローにおける置換ブロックレベル要素
  5. 非置換浮動要素
  6. 置換浮動要素
  7. 絶対配置される非置換要素
  8. 絶対配置される置換要素
  9. 通常フローにおける非置換インラインブロック要素
  10. 通常フローにおける置換インラインブロック要素

ポイント1-6と9、10に対して、相対配置される要素の場合において'left'および'right'の値は、9.4.3節の規則によって決定される。

注。 'width'の使用値は仮の値であり、何度も計算されてもよく、'min-width'および'max-width'に依存する。後述の幅の最小値と最大値の節を参照のこと。

10.3.1 非置換インライン要素の場合

'width'プロパティは適用しない。'margin-left'または'margin-right'に対する'auto'の算出値は、'0'の使用値になる。

10.3.2 置換インライン要素の場合

'margin-left'または'margin-right'に対する'auto'の算出値は、'0'の使用値になる。

'height'および'width'が'auto'の算出値を持ち、かつ要素が内在幅を持つ場合、内在幅は'width'の使用値となる。

'height'および'width'が'auto'の算出値を持ち、かつ要素が内在幅を持たない場合、内在高さと内在幅を持つ。つまり、'width'が'auto'の算出値を持つ場合、'height'は別の算出値を持ち、そしてその要素は内在比を持つ。その結果'width'の使用値は次のようになる:

(使用高さ) * (内在比)

'height'および'width'が'auto'の算出値を持ち、かつその要素が固有比を持つが固有の高さまたは幅を持たない場合、'width'の使用値はCSS 2.1で未定義である。しかし、その包含ブロックの幅が置換要素の幅に依存しない場合、'width'の使用値は通常フローにおける非置換ブロックレベル要素に用いる拘束方程式より計算されることが示唆される。

そうでなければ、'width'が'auto'の算出値を持つ場合、その要素は内在幅を持ち、その結果その内在幅は'width'の使用値となる。

そうでなければ、上記の条件に一致せず、'width'が'auto'の算出値を持つ場合、'width'の使用値は300pxになる。デバイスにあわせて300pxが広すぎる場合、ユーザーエージェントは2:1の比率を持つ最大の矩形の幅を使用し、代わりにデバイスに収めるべきである。

10.3.3 通常フローにおける非置換ブロック要素の場合

次の等式はその他のプロパティの使用値の間で保持されなければならない:

'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'である場合、両者の使用値は等しい。これは、包含ブロックの辺に対して要素を水平に中心に置く。

10.3.4 通常フローにおける置換ブロックレベル要素の場合

'width'の使用値は、インライン置換要素によって決定される。その結果非置換ブロックレベル要素の規則がマージンの決定に適用される。

10.3.5 非置換浮動要素の場合

'margin-left'または'margin-right'が'auto'として計算される場合、使用値は'0'となる。

'width'が'auto'として計算される場合、使用値は"適合するよう縮む"幅となる。

適合するように縮む幅の計算は、自動テーブルレイアウトアルゴリズムを使用したテーブルセルの幅の計算に似ている。おおまかには、明示的な改行が起きる場所以外で改行のないコンテンツを整形することによって望ましい幅を計算し、かつ望ましい最小の幅も計算する。すなわち、すべての可能な限りの改行を試みる。CSS 2.1は、実際のアルゴリズムを定義しない。そして、利用可能な幅を探す。この場合、これはすべての関連のあるスクロールバーの'margin-left'、'border-left-width'、'padding-left'、'padding-right'、'border-right-width'、'margin-right'および幅の使用値を引いた包含ブロックの幅である。

その結果、適合するように縮む幅は次のようになる:min(max(望ましい最小の幅, 利用可能な幅), 望ましい幅)。

10.3.6 置換浮動要素の場合

'margin-left'または'margin-right'が'auto'として計算される場合、使用値は'0'となる。'width'の使用値はインライン置換要素によって決定される。

10.3.7 絶対配置される非置換要素の場合

この節と次の節のために、用語(ある要素の)"静的位置"は、おおまかに、要素が通常フロー内にある位置を参照する。より正確には:

しかし、仮ボックスの次元を実際に計算するよりむしろ、ユーザーエージェントは可能性のある位置で見当を付けることが自由である。

静的位置を計算する目的に対して、固定配置される要素の包含ブロックはビューポートの代わりに初期包含ブロックとなり、そしてすべてのスクロール可能なボックスは、ボックスの原点までスクロールされると仮定されるべきである。

要素の使用値を決定する制約は:

'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つを選ぶ。

  1. 'left'と'width'が'auto'であり'right'が'auto'でなく、その後幅は適合するように縮む。'left'について解く。
  2. 'left'と'right'が'auto'であり'width'が'auto'でないなら、静的位置の包含ブロックを確立する要素の'direction'プロパティが静的位置の'left'に設置される'ltr'である。そうでなければ静的位置の'right'に設置される。そして、('directionが'rtl'の場合)または'right'('direction'が'ltr'の場合)について解く。
  3. 'width'と'right'が'auto'であり'left'が'auto'でないなら、幅は適合するように縮む。そして'right'について解く。
  4. 'left'が'auto'で'width'と'right'が'auto'でないなら、'left'について解く。
  5. 'width'が'auto'で、'left'と'right'が'auto'でないなら、'width'について解く。
  6. 'right'が'auto'で、'left'と'width'が'auto'でないなら、'right'について解く。

適合するように縮む幅の計算は、自動テーブルレイアウトアルゴリズムを使用したテーブルセルの幅の計算に似ている。おおまかには、明示的な改行が起きる場所以外で改行のないコンテンツを整形することによって望ましい幅を計算し、かつ望ましい最小の幅も計算する。すなわち、すべての可能な限りの改行を試みる。CSS 2.1は、実際のアルゴリズムを定義しない。次に、利用可能な幅を計算する。これは'left'(1の場合)または'right'(3の場合)を0に設定した後で'width'について解くことにより見つけられる。

その結果、適合するように縮む幅は次のようになる:min(max(望ましい最小の幅, 利用可能な幅), 望ましい幅)。

10.3.8 絶対配置される置換要素の場合

この場合、10.3.7節が制約式を通して適用するが、10.3.7節の残りの部分は以下の規則で置き換えられる:

  1. 'width'の使用値は、インライン置換要素によって決定される。'margin-left'または'margin-right'が'auto'として指定される場合、その使用値は以下の規則によって決定される。
  2. 'left''right'の両方が値'auto'を持つ場合、静的位置の包含ブロックを設置する要素の'direction'プロパティが'ltr'であるならば、静的位置の'left'に設定される。そうでなければ'direction'が'rtl'であり、静的位置の'right'に設定される。
  3. 'left'または'right'が'auto'の場合、'margin-left'または'margin-right'の任意の'auto'を'0'に置換する。
  4. この時点で'margin-left''margin-right'の両方が依然として'auto'である場合、2つのマージンが等しい値でなければならないような追加条件のもとで式を解く。ただしこれがマージンを負にする場合を除く。そして2つのマージンが負になる場合に、包含ブロックの方向が'ltr'('rtl')であるならば、'margin-left''margin-right')を0に設定し'margin-right''margin-left')について解く。
  5. この時点で'auto'がある場合、その値について式を解く。
  6. この時点で値が制限しすぎである場合、'left'(包含ブロックの'direction'プロパティが'rtl'の場合)または'right''direction'が'ltr'の場合)のどちらかの値を無視し、その値について解く。

10.3.9 通常フローにおける非置換インラインブロック要素の場合

'width'が'auto'である場合、使用値は浮動要素のように適合するように縮む幅になる。

'margin-left'または'margin-right'に対する'auto'の算出値は、'0'の使用値になる。

10.3.10 通常フローにおける置換インラインブロック要素の場合

置換インライン要素に同じ。

10.4 幅の最大値と最小値'min-width''max-width'

'min-width'
値:  <length> | <percentage> | inherit
初期値:  0
適用対象:  非置換インライン要素、テーブル列と列グループを除く全要素
継承:  no
パーセンテージ:  包含ブロックを含む幅を参照
メディア:  visual
算出値:  指定値のパーセンテージまたは絶対長さ
'max-width'
値:  <length> | <percentage> | none | inherit
初期値:  none
適用対象:  非置換インライン要素、テーブル列と列グループを除く全要素
継承:  no
パーセンテージ:  包含ブロックを含む幅を参照
メディア:  visual
算出値:  指定されたパーセンテージまたは絶対長さまたは'none'

この2つのプロパティは、著者にあるコンテンツ幅で制限することを許可する。値は次の意味を持つ:

<length>
固定した値を用いて最小または最大を指定する。
<percentage>
パーセンテージで使用値の決定を指定する。割合は、生成ボックスの包含ブロックの幅に対して計算される。包含ブロックの幅が負である場合、使用値は0になる。包含ブロックの幅がこの要素の幅に依存する場合、その結果のレイアウトはCSS 2.1で未定義である。
none
'max-width'にのみ)ボックスの幅を制限しない。

'min-width''max-width'に対する負の値は不正である。

CSS 2.1において、テーブル、インラインテーブル、テーブルセル、テーブル列、列グループでの'min-width'および'max-width'の効果は未定義である。

次のアルゴリズムはどのように2つのプロパティが'width'プロパティの使用値に影響を及ぼすかを説明する:

  1. 仮の使用幅は上述の"幅とマージンを計算"のもとで規則に従い計算される('min-width''max-width'なしで)。
  2. 仮の使用値が'max-width'より大きい場合、上記の規則が再び適用されるが、今回は'width'の算出値として'max-width'の算出値を用いる。
  3. 結果の幅が'min-width'より小さい場合、上記の規則を再度適用するが、今回は'width'の算出値として'min-width'を用いる。

このステップは上記のプロパティの実際の算出値に影響しない。

しかし、置換要素の内在比と'width'および'height'の両方に'auto'が指定されるため、アルゴリズムは次のようになる:

適切な制限違反に対して解決される高さと幅の値をテーブルから選択する。minmaxが真となるために、max-widthmax-heightをmax(min, max)として解釈する。このテーブルにおいてwh'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'がこの値で計算されたかのように、上記の"幅とマージンの計算"のもとで規則を適用する。

10.5 コンテンツの高さ'height'プロパティ

'height'
値:  <length> | <percentage> | auto | inherit
初期値:  auto
適用対象:  非置換インライン要素、テーブル行と行グループを除く全要素
継承:  no
パーセンテージ:  文を参照
メディア:  visual
算出値:  パーセンテージまたは'auto'(<percentage>の文を参照)または絶対長さ

このプロパティはボックスのコンテンツ幅を指定する。

このプロパティは、非置換インライン要素に適用しない。代わりに使用する規則については非置換インライン要素の高さとマージンの節を参照のこと。

値は次の意味を持つ:

<length>
長さの値を用いてコンテンツ領域の高さを指定する。
<percentage>
パーセント高さを指定する。割合は生成ボックスの包含ブロックの高さに対して計算される。包含ブロックの高さが明示されておらず(つまり内容の高さに依存し)、この要素が絶対配置でない場合は、値を'auto'として計算する。ルート要素のパーセント高さは、初期包含ブロックに対する高さである。注:絶対配置要素の包含ブロックはブロックレベル要素を基にするため、割合はその要素のパディングボックスの高さに対して計算される。これはCSS1からの変更点であり、パーセント高さは親要素のコンテンツボックスに対して常に計算されていた。
auto
高さは他のプロパティの値に依存する。以下の文を参照のこと。

絶対配置される要素の包含ボックスの高さは要素自身の大きさから独立しており、したがってそのような要素上のパーセント高さは常に解決できることに注意する。しかし、要素は文書で後に来る要素が処理されるまで高さが未知であってもよい。

'height'に対する負の値は不正である。

例:

たとえば、次の規則は段落の高さを100pxに設定する:

p { height: 100px }

100px以上のコンテンツ高さを持つ段落は、'overflow'プロパティにしたがってボックスからはみ出す

10.6 高さとマージンの計算

'top''margin-top''height''margin-bottom''bottom'の値を計算するために、ボックスの種類によって分類する必要がある:

  1. 非置換インライン要素
  2. 置換インライン要素
  3. 通常フローにおける非置換ブロックレベル要素
  4. 通常フローにおける置換ブロックレベル要素
  5. 非置換浮動要素
  6. 置換浮動要素
  7. 絶対配置される非置換要素
  8. 絶対配置される置換要素
  9. 通常フローにおける非置換インラインブロック要素
  10. 通常フローにおける置換インラインブロック要素

ポイント1-6と9、10については、'top'および'bottom'の使用値は、9.4.3節の規則によって決定される。

注:これらの規則は、任意の他の要素に応じてルート要素に適用する。

注。 'height'の使用値は仮の値であり、何度も計算されてもよく、'min-height'および'max-height'に依存する。下記の高さの最小値と最大値の節を参照のこと。

10.6.1 非置換インライン要素の場合

'height'プロパティは適用しない。コンテンツ領域の高さはフォントを基にすべきであるが、この仕様はその方法を指定しない。たとえば、ユーザーエージェントはemボックスやフォントの最大のアセンダーやディセンダーを用いてもよい。(前者は、著者が'line-height'に対する背景スタイルの制御を確実にするだろうが、そのコンテンツ領域の外側に描くグリフをもたらすだろう。後者は、emボックスの上または下の部分にあるグリフがまだコンテンツ領域内に収まることを保証するが、異なるフォントごとに異なるサイズのボックスをもたらすだろう。)

注:CSS level 3は、コンテンツ高さに用いるフォントの寸法を選択するためのプロパティをおそらく含む。

非置換インラインボックスのボーダーおよびマージン、垂直方向のパディングは、コンテンツ領域の上部と下部で開始し、'line-height'と関係しない。しかし'line-height'に限り、行ボックスの高さの計算時に用いられる。

1つ以上のフォントが用いられる場合(これはグリフが異なるフォントで発見された場合に起こる)、コンテンツ領域の高さはこの仕様で定義されない。しかし、高さはコンテンツ領域が十分な高さとなるような、要素のすべてのフォントの(1)emボックスまたは(2)最大のアセンダーとディセンダーのいずれかを選択することを示唆する。フォントのベースライン揃えにに応じて、これは関連するフォントの大きさのすべてより大きくてもよいことに注意する。

10.6.2 置換インライン要素、通常フローにおいて置換ブロックレベルおよび置換インラインブロック要素、置換浮動要素の場合

'margin-top'または'margin-bottom'が'auto'である場合、使用値は0になる。

'height''width'が'auto'の算出値と内在高さの両方である場合、内在高さが'height'の使用値になる。

そうでなければ、'height'が'auto'の算出値を持つ場合、その要素は内在比を持ち、結果その'height'の使用値は次のようになる:

(使用幅) / (内在比)

そうでなければ、'height'が'auto'の算出値を持つ場合、その要素は内在高さを持ち、結果その内在高さは'height'の使用値となる。

そうでなければ、上記の条件に一致しないが、'height'が'auto'の算出値を持つ場合、'height'の使用値は2:1の比を持つ最も大きい矩形の高さに設定されなければならず、150pxより大きくない高さを持ち、かつデバイスの幅より大きくない幅を持つ。

10.6.3 'overflow'が'visible'計算時の通常フローにおける非置換ブロックレベル要素の場合

この節も'overflow'が'visible'に計算されない場合に通常フローで非置換ブロックレベル要素に適用されるが、ビューポートに伝播されている。

'margin-top'または'margin-bottom'が'auto'である場合、使用値は0になる。'height'が'auto'の場合、高さはその要素が子供ブロックレベル要素を持つかどうか、およびパディングまたはボーダーを持つかどうかによって異なる。

要素の高さは要素の上コンテンツ辺から、以下のうち最初に受け入れ可能なものまでの距離となる:

  1. ボックスが1行以上のインライン整形コンテキストを設置する場合、最後の行ボックスの下辺
  2. 子の下マージンが要素のマージンと相殺されない場合、最後のフロー内の子の(相殺可能な)下マージンの下辺
  3. 最後のフロー内の子の下ボーダー辺であって、その子の上マージンがその要素の下マージンと相殺されない
  4. そうでなければ、0

通常フローで子供のみを考慮に入れる(すなわち、浮動ボックスと絶対配置ボックスは無視され、相対配置ボックスはオフセットを考慮しない)。子ボックスは匿名ブロックボックスであってもよいことに注意する。

10.6.4 絶対配置される非置換要素の場合

本節と次節の目的のために、用語(ある要素の)"静的位置"は、おおまかに、要素が通常フロー内にある位置を参照する。より正確に、'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. 'top'と'height'が'auto'でかつ'bottom'が'auto'でないなら、高さは10.6.7節によるコンテンツに基づき、'margin-top'と'margin-bottom'の'auto'値を0に設定し、'top'について解く。
  2. 'top'と'bottom'が'auto'でかつ'height'が'auto'でないなら、'top'に固定位置を設定し、'margin-top'と'margin-bottom'の'auto'値を0に設定し、'bottom'について解く。
  3. 'top'と'bottom'が'auto'でかつ'height'が'auto'でないなら、高さは10.6.7節によるコンテンツに基づき、'margin-top'と'margin-bottom'の'auto'値を0に設定し、'bottom'について解く。
  4. 'top'が'auto'で'height'と'bottom'が'auto'でないなら、'margin-top'と'margin-bottom'の'auto'値を0に設定し、'top'について解く。
  5. 'height'が'auto'で、'top'と'bottom'が'auto'でないなら、'margin-top'と'margin-bottom'の'auto'値を0に設定し、'height'について解く。
  6. 'bottom'が'auto'で'top'と'height'が'auto'でないなら、'margin-top'と'margin-bottom'の'auto'値を0に設定し、'bottom'について解く。

10.6.5 絶対配置される置換要素の場合

これは、要素が内在高さを持つことを除いて、1つ前の場合と似ている。置換の順序は現状では次のようになる:

  1. 'height'の使用値はインライン置換要素によって決定される。'margin-left'または'margin-right'が'auto'として指定される場合、その使用値は以下の規則によって決定される。
  2. 'top''bottom'の両方が値'auto'を持つ場合、'top'を要素の通常位置に置き換える。
  3. 'bottom'が'auto'の場合、'margin-top'または'margin-bottom'の任意の'auto'を'0'に置き換える。
  4. この時点でまだ'margin-top''margin-bottom'の両方が'auto'の場合、2つのマージンが等しくなるように上の等式を解く。
  5. この時点でまだ'auto'が1つでも残っていれば、その値について式を解く。
  6. 値が制限しすぎの場合、'bottom'の値を無視し、その値ついて式を解く。

10.6.6 複雑な事例

この節は以下に適用する:

'margin-top'または'margin-bottom'が'auto'である場合、使用値は0になる。'height'が'auto'である場合、10.6.7節によって要素の子孫に依存する

インラインブロック要素に対して、行ボックスの高さの計算時にマージンボックスが使用される。

10.6.7 ブロック整形コンテキストルートの'auto'高さ

ある場合(たとえば、上記の10.6.4節10.6.6節を参照)において、要素がブロック整形コンテキストを設置する高さは以下のように計算される:

その要素がインラインの子供のみを持つ場合、高さは、最上段の行ボックスの上と最下段の行ボックスの下の間の距離となる。

その要素がインラインの子供である場合、高さは、最上段のブロックレベル子ボックスの上マージン辺と行ボックスの上辺から最下段の行ボックスの下辺との間の距離となる。

絶対配置される子供は無視され、かつ相対配置ボックスはオフセットを考慮しない。子ボックスは匿名ブロックボックスであってもよいことに注意する。

加えて、要素が任意の浮動子孫を持ち、その子孫の下マージン辺が要素の下コンテンツ辺の下にある場合、高さはその辺を含むために増加する。このブロック整形コンテキストに参加する浮動のみが考慮される。たとえば、絶対配置される子孫の内部で浮動する。すなわち他の浮動はない。

10.7 高さの最大値と最小値'min-height''max-height'

特定の範囲に要素の高さを制限することは便利な場合がある。2つのプロパティがこの機能を提供する:

'min-height'
値:  <length> | <percentage> | inherit
初期値:  0
適用対象:  非置換インライン要素、テーブル行と行グループを除く全要素
継承:  no
パーセンテージ:  文を参照
メディア:  visual
算出値:  指定値のパーセンテージまたは絶対長さ
'max-height'
値:  <length> | <percentage> | none | inherit
初期値:  none
適用対象:  非置換インライン要素、テーブル行と行グループを除く全要素
継承:  no
パーセンテージ:  文を参照
メディア:  visual
算出値:  指定されたパーセンテージまたは絶対長さまたは'none'

この2つのプロパティは、著者が特定の範囲にボックスの高さを制限できる。値は次の意味を持つ:

<length>
固定の最小値または最大値の計算高さを指定する。
<percentage>
パーセンテージで使用値の決定を指定する。割合は生成ボックスの包含ブロックの高さに対して計算される。包含ブロックの高さが明示的に指定されず(すなわち、コンテンツの高さに依存し)、この要素が絶対配置されない場合、パーセント値は0として('min-height'の場合)または'none'として('max-height'の場合)扱われる。
none
'max-height'のみ)ボックスの高さを制限しない。

'min-height'および'max-height'に対する負の値は不正である。

CSS 2.1において、テーブル、インラインテーブル、テーブルセル、テーブル行、行グループでの'min-height'および'max-hegiht'の効果は未定義である。

次のアルゴリズムは、どのように2つのプロパティが'height'プロパティの使用値に影響を及ぼすかを説明する:

  1. 暫定的な使用高さは、上述の"高さとマージンを計算"のもとで規則に従い計算される('min-height''max-height'なしで)。
  2. 仮の使用値が'max-height'より大きい場合、上記の規則が再び適用されるが、今回は'height'の算出値として'max-height'の算出値を用いる。
  3. 結果の幅が'min-height'より小さい場合、上記の規則を再度適用するが、今回は'height'の算出値として'min-height'を用いる。

このステップは上記のプロパティの実際の算出値に影響しない。使用される'height'の変化は、"マージンの相殺"(8.3.1節)'min-height'または'max-height'の規則によって要求される場合を除いて、相殺マージンに影響を与えない。

しかし、'auto'として計算された'width''height'の両方を持つ置換要素のために、使用幅と高さを見つけるために上記の最小値と最大幅の幅もとでアルゴリズムを使用する。その後、あたかも算出値であるかのように、結果の幅と高さを使用して、上記の"高さとマージンを計算"のもとに規則を適用する。

10.8 行の高さの計算'line-height''vertical-align'プロパティ

インライン整形コンテキストの節で示したように、ユーザーエージェントは縦に積み重ねた行ボックスの中にインラインレベルボックスをフローする。行ボックスの高さは次のように決定される:

  1. 行ボックスにおいて各インラインレベルボックスの高さが計算される。置換要素、インラインブロック要素、インラインテーブル要素に対して、これはそれら要素のマージンボックスの高さになる。インラインボックスに対して、これは'line-height'になる。("高さとマージンを計算"および"行間と半行間"インラインボックスの高さを参照。)
  2. インラインレベルボックスは、'vertical-align'プロパティによって垂直に揃えられる。インラインレベルボックスが'top'または'bottom'に揃えられる場合、インラインレベルボックスは行ボックス高さを最小にするように揃えられればならない。そのようなボックスが十分高い場合、複数の解決法が存在し、CSS 2.1は行ボックスのベースラインの位置を定義しない(すなわち、支柱の位置、以下参照)。
  3. 行ボックスの高さは、最も高いボックスの上と最も低いボックスの下との間の距離になる。(これは下記の'line-height'のもとで説明されるような支柱を含む。)

空のインライン要素は空のインラインボックスを生成するが、このインライン要素のボックスはマージン、パディング、ボーダー、行の高さを依然として持ち、したがってコンテンツを持つ要素のようにこれらの計算に影響を与える。

10.8.1 行間と半行間

CSSは、すべてのフォントがベースラインとその下に深さの上側に特性高さを指定するフォントメトリックスを持つことを仮定する。この節において、Aを高さ(与えられたサイズでの与えられたフォント)、Dを深さの意味で用いる。またAD = A + Dと定義し、上から下までの距離とする。(TrueTypeおよびOpenTypeフォントに対してどのようにAおよびDを発見するかについては下記の注を参照のこと。)これはフォントメトリック全体として存在し、任意の個別グリフのアセンダおよびディセンダと対応する必要はないことに注意する。

ユーザーエージェントは、それらの関連のベースラインによって相互に非置換インラインボックス内のグリフを揃えなければならない。それから各グリフに対して、ADを決定する。1つの要素でグリフは異なるフォントに由来してもよく、ひいては同じADをすべて持つ必要もないことに注意する。インラインボックスが全くグリフを含まない場合、インラインボックスは要素の最初の利用可能なフォントのADをもつ支柱(ゼロ幅の不可視のグリフ)を含むと考えられる。

さらに各グリフに対して、追加で行間Lを決定する。ここでL = 'line-height' - AD。半行間は、上のAと他の半分の下のDで追加される、グリフとその行間の上のA' = A + L/2のベースラインの合計の高さ、D' = D + L/2の合計の深さで与えられる。

注。 Lは負であってもよい。

インラインボックスの高さは、すべてのグリフと両側のそれらの半行間を含んでおり、したがってこれは厳密に'line-height'である。子要素のボックスはこの高さに影響しない。

非置換要素のマージン、パディング、ボーダーは行ボックスの計算の一部ではないが、それでもこれらはインラインボックスの周りにレンダリングされる。これは、'line-height'によって指定される高さが包含ボックスの高さより小さい場合、パディングとボーダーの背景と色は隣接する行ボックスに"はみだし"てもよいことを意味する。ユーザーエージェントは文書の順番でボックスをレンダリングすべきである。これは、後続の行のボーダーに前の行のボーダーとテキストの上に描画させる。

注。 CSS 2.1はインラインボックスのコンテンツ領域がどのようなものであるかを定義せず(上記10.6.1節参照)、よって異なるユーザーエージェントが異なる場所で背景とボーダーを描いてもよい。

注。(現在の要素のフォントサイズにスケーリングした後の)AとDに対するフォントOS/2テーブルから"sTypoAscender"と"sTypoDescender"のメトリックを用いるOpenTypeまたはTrueTypeフォントを使用する実装を推奨する。これらのメトリックの不足において、HHEAテーブルから"アセント"および"ディセント"メトリックを使用すべきである。

'line-height'
値:  normal | <number> | <length> | <percentage> | inherit
初期値:  normal
適用対象:  すべての要素
継承:  yes
パーセンテージ:  要素自身のフォントの大きさを参照
メディア:  visual
算出値:  <length><percentage>は絶対値、そうでなければ指定値に同じ

インラインレベル要素から構成されるブロックコンテナ要素のコンテンツ上で、'line-height'は要素内の行ブロックの最小の高さを指定する。ちょうど、あたかも各行ボックスが要素のフォントと'line-height'プロパティをもつゼロ幅の行ボックスで開始されるかのように、最小の高さはベースラインとその下の最小深さより高い最小の高さからなる。この架空のボックスを"strut"と呼ぶ(この名前はTeXからアイデアを得ている)。

ベースラインの上下のフォントの高さと深さは、フォントに含まれるメトリックの存在を仮定する。(詳細は、CSS level 3を参照のこと。)

非置換インライン要素上で、'line-height'は、行ボックスの高さの計算で使用される高さを指定する。

このプロパティの値は以下の意味を持つ:

normal
要素のフォントを基に"理にかなった"値を使用値に設定するようユーザーエージェントに指示する。この値は<number>と同じ意味を持つ。'normal'に対して1.0と1.2の間の使用値を推奨する。算出値は'normal'になる。
<length>
指定長さは、行ボックス高さの計算で使用される。負の値は不正である。
<number>
プロパティの使用値は、この数に要素のフォントサイズを乗じたものになる。負の値は不正である。算出値は指定値と同じである。
<percentage>
プロパティの算出値は、このパーセンテージに要素の計算されるフォントサイズに乗じたものである。負の値は不正である。

例:

以下の例で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'となるボックスである(包含ボックスのグリフおよび両側の半行間を含む。上記を参照)。他のすべての要素に対して、配置に使用するボックスはマージンボックスである。

baseline
ボックスのベースラインを親ボックスのベースラインと揃える。ボックスがベースラインを持たない場合、下マージン辺を親のベースラインに揃える。
middle
ボックスの垂直の中点を、親のx-heightの半分を加えた親ボックスのベースラインに揃える。
sub
ボックスのベースラインを、親ボックスの下付き文字として適切な位置まで下げる。(この値は要素のフォントサイズに影響を与えない。)
super
ボックスのベースラインを、親ボックスの上付き文字として適切な位置まで上げる。(この値は要素のフォントサイズに影響を与えない。)
text-top
ボックスの上を、親のコンテンツ領域の上に揃える。(10.6.1節参照)。
text-bottom
ボックスの下を、親のコンテンツ領域の下に揃える。(10.6.1節参照)。
<percentage>
この距離('line-height'の値のパーセント)だけ、ボックスを上に上げる(正の値)または下に下げる(負の値)。値'0%'は'baseline'と同じ意味になる。
<length>
この距離だけボックスを上に上げる(正の値)または下に下げる(負の値)。値'0cm'は'baseline'と同じ意味になる。

以下の値は行ボックスに対して要素を揃える。要素は行ボックスに対して揃えられる子を持ってもよいので(順番に子孫が行ボックスに対して揃えられてもよいので)、この値は整列サブツリーで境界を使用する。インライン要素の整列サブツリーは、要素と、計算される'vertical-align'値が'top'または'bottom'でないすべての子供インライン要素の整列サブツリーを含む。整列サブツリーの上は、サブツリーにおいてボックスの上の最も高いものであり、下も同様である。

top
整列サブツリーの上を、行ボックスの上に揃える。
bottom
整列サブツリーの下を、行ボックスの下に揃える。

'inline-table'のベースラインは、テーブルの最初の行のベースラインである。

'overflow'プロパティが'visible'以外の算出値を持つ、またはそれがどちらか一方のフロー内の行ボックスを持たない場合、'inline-block'のベースラインは通常フローにおけるその最後の行ボックスのベースラインとなる。この場合、ベースラインは下マージン辺となる。