コンテナブロック（包含ブロック）とは

2006年11月03日（金）コメント:0 トラックバック:0

クイズの解答の前に、コンテナブロックについて。

Containing blocksのことを自分は「コンテナブロック」（あるいは単に「コンテナ」）と言ってきましたが、日本語では包含ブロックとしたほうが一般的なのかもしれません。ともかく、CSSでレイアウトを行ううえでは包含ブロックを意識することが大切です。

包含ブロックの定義は以下を参照してください。

とくにこんな場合には包含ブロックを意識したほうがいいでしょう。

position:absoluteを使うとき。たとえばleft:100pxなら該当ボックスの左マージン辺を包含ブロックの左辺から100px離す。
floatを使うとき。たとえば右フロートはその右マージン辺が先行するフロートのマージン辺か包含ブロックの右辺に接するまで右に寄せられる。
marginを使うとき。たとえば通常フローのボックスの左マージンは前後にフロートや絶対配置ボックスがあっても包含ブロックの左辺からの距離である。

また、こんな等式があることも覚えておいたほうがいいでしょう。

通常フローの非置換ブロックレヴェル要素

他のプロパティの使用値との間で次の等式を常に成立させなければならない：

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + (もし在ればスクロールバーの幅) = 包含ブロックの幅