仕様書

• [1] CSS 2.1
  • 9.1.2 Containing blocks <http://www.w3.org/TR/2007/CR-CSS21-20070719/visuren.html#containing-block>
  • 10.1 Definition of "containing block" <http://www.w3.org/TR/2007/CR-CSS21-20070719/visudet.html#containing-block-details>

定義

[15] 包含ブロックは次の通り定められています。 CSS 2.1 10.1

• 根要素の属する包含ブロックは初期包含ブロックです。
• それ以外の要素は、
  • position が relative や static の場合、包含ブロックはブロック水準箱、 表こま箱、行内ブロック箱のいずれか直近の祖先の内容辺により形成されます。
  • position が fixed の場合、
    • 連続媒体の場合、包含ブロックは viewport です。
    • 頁媒体の場合、包含ブロックは頁領域です。
  • position が absolute の場合、 position が absolute、 relative、fixed のいずれかである直近の祖先です。
    • 祖先が行内水準の場合、包含ブロックはその direction 特性に依存し、
      • ltr の場合、包含ブロックの上辺・左辺はその祖先が生成した最初の箱、下辺・右辺は最後の箱のpadding辺です。
      • rtl の場合、包含ブロックの上辺・右辺はその祖先が生成した最初の箱、下辺・左辺は最後の箱のpadding辺です。
      • なお、包含ブロックの幅が負になることもあります。
    • 祖先がそれ以外の場合、包含ブロックはその祖先の padding辺です。
    • そのような祖先が存在しない場合、包含ブロックは初期包含ブロックです。

[16] 逆の見方では、

• Viewport は fixed な箱の包含ブロックとなります。
• 初期包含ブロックはその子孫の箱や生成内容の包含ブロックとなります。
• 頁領域は包含ブロックとなります。
• [11] 絶対配置される箱は新しい包含ブロックを確立します。 CSS 2.1 9.6
• position: fixed な箱は新しい包含ブロックを確立します。
• position: relative な要素が生成する箱全体を包み込む箱は新しい包含ブロックを確立します。
• [4] ほとんどのブロック水準要素が生成する主要ブロック箱は、その子孫の箱や生成内容の包含ブロックとなります。 CSS 2.1 9.2.1
• 表こま箱、行内ブロック箱は新しい包含ブロックを確立します。

包含ブロックに対する相対指定

[3] <margin-width>, <padding-width> の値 <percentage>

包含ブロックの幅 (margin-top, padding-bottom でも。) に対する値です。ただし、包含ブロックの幅がその要素自身に依存する場合の配置は未定義です。 CSS 2.1 8.3, 8.4

[5] 絶対配置

絶対配置モデルではその要素の箱の位置が包含ブロックに対して定められます。 CSS 2.1 9.3, 9.3.1, 9.7 <percentage> は包含ブロックの高さ (top, bottom) や幅 (right, left) に対する値です。 CSS 2.1 9.3.2 top などの包含ブロックがブロック水準要素に由来する場合、 padding辺からの距離とみなされます。 CSS 2.1 9.3.2 Note

[17] width, min-width, max-width の値 <percentage>

包含ブロックの幅に対する値です。 包含ブロックの幅がその要素自身に依存する場合の配置は未定義です。 CSS 2.1 10.2, 10.4 min-width, max-width で包含ブロックの幅が負の時は、 使用値は 0 です。 CSS 2.1 10.4 包含ブロックがブロック水準要素に由来する場合、 padding箱の幅を使って計算します。 CSS1 では内容箱でした。 CSS 2.1 10.2 Note

[20] height, min-height, max-height の値 <percentage>

包含ブロックの高さに対する値です。ただし包含ブロックの高さが内容によって決まる非絶対配置の時は、 auto/none/0 が算出値です。 CSS 2.1 10.5, 10.7

[22] text-indent の値 <percentage>

包含ブロックの幅に対する値です。 CSS 2.1 16.1

包含ブロックに対する位置決定

• [6] ブロック書式付け文脈では、箱は包含ブロックの先頭 (top) から順に垂直方向に配置されます。 箱の左外辺は包含ブロックの左辺に揃えて配置されます。 (rtl なら右外辺、右辺。) CSS 2.1 9.4.1
• [7] 行内書式付け文脈では、箱は包含ブロックの先頭 (top) から順に水平方向に配置されます。 (この箱が配置される矩形領域を行箱といいます。) CSS 2.1 9.4.2
• [8] 行箱の幅は包含ブロックと丁度内接するように決まります。 ただし浮動の存在により縮まることがあります。 CSS 2.1 9.4.2, 10.2
• [9] 相対配置で left と right の両方が指定されていて矛盾する時 (「制約が強すぎる (over-constrained) 時」)、どちらが使われるかは 包含ブロックの direction により決まります (ltr なら left が勝ちます)。 CSS 2.1 9.4.3
• [10] 浮動箱は包含ブロックまたは他の浮動箱の外辺に自らの外辺が接する位置まで左または右に移動されます。 CSS 2.1 9.5, 9.5.1 浮動箱の上外辺が包含ブロックの上辺より上にいってはなりません。 CSS 2.1 9.5.1
• [14] 段落埋め込み水準は包含ブロックの direction により決めます。 CSS 2.1 9.10
• [18] (1) 行内置換要素で、 (2) height と width の算出値が共に auto で、 (3) 要素が内在比率を持ち、 (4) 内在高や内在幅は持たず、 (5) 包含ブロックの幅がその要素の幅に依存しない場合、 width の使用値は通常フローのブロック水準非置換要素と同じ等式により決定します。 CSS 2.1 10.3.2
• [19] 行内置換要素で内在幅が百分率値の場合、 包含ブロックの幅に対する比率として扱います。 ただし、包含ブロックの幅がその要素に依存する場合は内在幅はないものとします。 CSS 2.1 10.3.2
• その他の場合の幅、高さ決定も包含ブロックに依存します。

関連

[13] スタック付け文脈と包含ブロックは必ずしも一致しません CSS 2.1 9.9.1。

[21] ある要素に対する overflow によってくりぬかれる対象となるのはその要素の子孫ですが、 子孫であっても、

• 包含ブロックが viewport であるもの
• 包含ブロックがその要素の祖先であるもの

は対象外となります。 CSS 2.1 11.1.1