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

Revised: Jun./22nd/2004

視覚フォーマット関連のプロパティは、大域的な（グローバルな）フォーマッティング（フォーマット化）に関して決定的なプロパティでした。これに対して、よりきめ細かい指定によって、最終的な視覚フォーマットモデルを決定する、より詳細なプロパティが存在します。

ここで紹介する幾つかは、他のフォーマッティング・プロパティによる指定によって、算出値として暗黙的に決定される一方で、明示的に指定することによって、見栄えに関する決定的な差異を実現することもあります。

1. 幅
   1. width
   2. min-width
   3. max-width
2. 高さ
   1. min-height
   2. min-height
   3. max-height
3. line-height
4. vertical-align

width

プロパティ 'width' は、ブロックレベル要素と置換要素 (img, input, textarea, select, object) に指定可能です。セレクタにマッチした対象のボックスの内容の幅を指定します。

'width' は子要素に継承されません。デフォルトの値は auto です。inherit は、親要素の値を明示的に継承する指定です。負の値は不正です。

画像データなどで置換される要素の場合は、置換結果の幅が指定されます。インライン要素には、指定できません。テーブルの行などにも、指定できません。

<percentage>

生成ボックスの包含ブロックの幅を 100% として指定。

auto

'margin', 'left'/'right' 値に依存する。

一般的なブロックレベル要素のボックスでは、次のような等式が成り立ちます：

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

min-width, max-width

プロパティ 'min-width' は、ブロックレベル要素と置換要素 (img, input, textarea, select, object) に指定可能です。セレクタにマッチした対象のブロックの幅の最大値と最小値を指定します。

'min-width', 'max-height' は子要素に継承されません。'min-width' のデフォルトの値はユーザエージェントに依存します。'max-width' のデフォルトの値はnone でます。inherit は、親要素の値を明示的に継承する指定です。負の値は不正です。

'width' の指定に基づいて計算された幅が、これらの指定を超える場合は、これらの指定値を 'width' の値として採用し、再計算されます。

height

プロパティ 'height' は、ブロックレベル要素と置換要素 (img, input, textarea, select, object) に指定可能です。セレクタにマッチした対象のボックスの内容の高さを指定します。

'height' は子要素に継承されません。'height' のデフォルトの値は auto です。inherit は、親要素の値を明示的に継承する指定です。負の値は不正です。

<percentage>

生成ボックスの包含ブロックの高さを 100% として指定。包含ブロックの高さが内容に依存して決定する場合は、auto と等価に解釈される。

auto

'margin', 'top'/'bottom' 値に依存する。

一般的なブロックレベル要素のボックスでは、次のような等式が成り立ちます：

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

min-height, max-height

プロパティ 'min-height' は、ブロックレベル要素と置換要素 (img, input, textarea, select, object) に指定可能です。セレクタにマッチした対象のブロックの高さの最大値と最小値を指定します。

'min-height', 'max-height' は子要素に継承されません。'min-height' のデフォルトの値は 0 です。'max-height' のデフォルトの値は　none です。inherit は、親要素の値を明示的に継承する指定です。負の値は不正です。

'height' の指定に基づいて計算された高さが、これらの指定を超える場合は、これらの指定値を 'height' の値として採用し、再計算されます。

line-height

プロパティ 'line-height' は、任意の要素に指定可能です。セレクタにマッチした対象のインラインボックスの最初の高さを指定します。

'line-height' は子要素に継承されます。'line-height' のデフォルトの値は normal です。inherit は、親要素の値を明示的に継承する指定です。負の値は不正です。

<number>

そこで採用されるフォントサイズに対する倍率。小数が許される。normal が 1.0～1.2 と等価となる。

<percentage>

そこで採用されるフォントサイズに対する比率。

nromal

フォントサイズに基づいて、ユーザエージェントが適切に計算した結果を用いる。

テキストベースの要素の場合は、'line-height' の指定は明確です。行のベースラインからベースラインまでの距離が、フォントサイズと 'line-height' の指定値から計算された値に一致します。行間ではなく、行ブロックの高さ（行の高さ）となることに注意してください。

但し、行ブロックに置換要素 (img, input, textarea, select, object) を含む場合は、置換要素の 'height' が採用されます。

殆どのブラウザが、大文字と小文字の区別を持つラテン系の言語を想定して「適切な」行の高さを計算しています。小文字が主となるテキストの行の高さを適切として計算されるので、日本語のように、大文字と小文字がない言語（全て大文字の言語）の場合は、行の高さが詰まって見えます。ラテン系フォントのグリフの 'x-height' （大文字と小文字のサイズの比率）が .4～.5 前後であることを考えると、和文（属性 lang="ja" を持つ要素）の 'line-height' の値は 1.4～1.5 が望ましいと考えられます。

'line-height' の例：

/* p 要素のインラインボックスの高さが、
   最低でもフォントの 1.3 倍 */
p { line-height: 1.3 } 

/* strong 要素のインラインボックスの高さが、
   最低でもフォントの 1.5 倍 */
strong { line-height: 150% }

vertical-align

プロパティ 'vertical-align' は、インラインレベルの要素と 'table-cell' の要素に指定可能です。セレクタにマッチした対象のインラインボックスの、行ボックス内部での上下方向の位置を指定します。

'vertical-align' は子要素に継承されません。'vertical-align' のデフォルトの値は baseline です。inherit は、親要素の値を明示的に継承する指定です。負の値は不正です。

baseline

ベースラインを、親ボックスのベースラインと揃える。

middle

ボックスの中央線を親ボックスのベースラインから親の 'x-height' の半分だけ上に揃える。

sub

ベースラインを親ボックスの下付き添字の位置まで下げる。

super

ボックスのベースラインを親ボックスの上付き添字の位置まで上げる。

text-top

ボックスの上辺を親要素のフォントの上辺に揃える。

text-bottom

ボックスの下辺を親要素のフォントの下辺に揃える。

<percentage>

'line-height' の値を 100% として指定する。0% が 'baseline' と等価。