関連プロパティ

• margin-top
  margin-bottom
• margin
• border-right-width
  border-left-width
• padding-right
  padding-left
• height
• line-height
• min-height
• max-height
• top
  bottom
• display
• float
• position

垂直方向に値として[auto]を使用した場合

'height'、'margin-top'、'margin-bottom'(簡略化プロパティ'margin'でも指定可)、'top'、'bottom'。この5つのプロパティには[auto]を使う事が出来ます。ここでは、どの状況でどのプロパティを[auto]にするとそれがどのように処理されるのかを説明します。

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

'height'は効果を持ちませんが、代わりに行の高さを'line-height'で指定出来ます。'top'、'bottom'、'margin-top'、'margin-bottom'の値が[auto]の場合、その値は"0"として扱われます。

置換インライン要素、置換ブロック要素、置換フロート要素の場合

'top'、'bottom'、'margin-top'、'margin-bottom'の値が[auto]の場合、その値は"0"として扱われます。'height'の値が[auto]の場合、その値として内在寸法を使用します。ただし、縦横比は保存します。

非置換ブロック要素、非置換フロート要素の場合

'top'、'bottom'、'margin-top'、'margin-bottom'の値が[auto]の場合、その値は"0"として扱われます。'height'の値が[auto]の場合、採用される値は、その要素が子供ブロック要素を持つかどうかによって異なります。その要素がインラインの子供要素しか持たない場合、最上段にある行ボックスの上辺から、最下段にある行ボックスの下辺までの距離が採用されます。その要素がブロックの子供要素を持つ場合、最上段にあるブロックボックスのマージン上辺から、最下段にあるブロックボックスのマージン下辺までの距離が採用されます。この場合分けでは、フロートしていない子供要素のみを考えます(つまり、フロートや絶対配置のボックスは無視して、相対配置のボックスは位置指定されていない状態で考えます)。匿名ボックスも子供ボックスの1つとして考えている点に注意してください。

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

以下の等式が常に成立する必要があります。

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = コンテナブロックの高さ

以下の順で[auto]を処理していきます。

'top'の値が[auto]の場合

当該要素の'position'の値を[static]と仮定した時に、その要素が最初に生成するボックスを仮定ボックスと呼ぶ事にします。その仮定ボックスの上外辺から、コンテナブロック上辺までの距離を'top'の値として採用します。

'height'と'bottom'の値が両方とも[auto]の場合

'bottom'の値を"0"として扱います。

この時点でまだ'bottom'か'height'の値が[auto]のままであり、且つ'margin-top'又は/及び'margin-bottom'の値が[auto]の場合

そ(れら)のマージンの値を"0"として扱います。

この時点でまだ'margin-top'と'margin-bottom'の値が両方とも[auto]のままの場合

上の等式から導き出される値を両者で等分します。

この時点でまだ[auto]という値が1つだけ残っている場合

そのプロパティについて上の等式を解きます。

5つのプロパティすべてに[auto]以外の値を指定してある場合

'bottom'の値を無視します。そして、その無視したプロパティ'bottom'について上の等式を解きます。

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

上記の等式を利用します。以下の順で[auto]を処理していきます。

'height'の値が[auto]の場合

'height'の値として内在寸法の幅を採用します。ただし、縦横比は保存します。

'top'の値が[auto]の場合

当該要素の'position'の値を[static]と仮定した時に、その要素が最初に生成するボックスを仮定ボックスと呼ぶ事にします。その仮定ボックスの上外辺から、コンテナブロック上辺までの距離を'top'の値として採用します。

この時点でまだ'bottom'の値が[auto]のままであり、且つ'margin-top'又は/及び'margin-bottom'の値が[auto]の場合

そ(れら)のマージンの値を"0"として扱います。

この時点でまだ'margin-top'と'margin-bottom'の値が両方とも[auto]のままの場合

上の等式から導き出される値を両者で等分します。

この時点でまだ[auto]という値が1つだけ残っている場合

そのプロパティについて上の上の等式を解きます。

'height'以外の4つのプロパティすべてに[auto]以外の値を指定してある場合

'bottom'の値を無視します。そして、その無視したプロパティ'bottom'について上の等式を解きます。

問題点

1. 画像の縦横比が保存されません(CSS1では保存しました)。この点は正誤表で訂正されました。

CSS1とCSS2の相違点

1. CSS1では縦方向のレンダリング方法の説明はほとんどありませんでした。