ブロックレベル要素とインラインレベル要素(2)

ボックスモデルを構成する４つの要素　

• content
• contentとborder間の余白：padding
• border：線にも幅がある事に注意。
• borderと他のボックスとの余白：margin

過去記事はこちら

ボックスモデルの図

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

• 子孫要素を配置できる領域の事を言う。
• 包含ブロックはpaddingがあればpaddingの内側、なければborderの内側と一致する。幅指定無しの最単純モデルの場合。
• 子孫要素の位置と大きさは包含ブロックが決定する。
• 直近の祖先要素＝包含ブロックではない。
  position：fixedを指定→window=bodyが包含ブロック
  position：absoluteを指定→position：static以外の直近の祖先要素が包含ブロック

下記包含ブロック最単純モデル図においてp要素の配置場所と大きさは親要素であるdiv要素のpaddingによって決定される。

　　　　↓↓↓　　　　　↓↓↓

上図：P要素のブロックボックス

下図：包含ブロックであるdiv要素によってp要素の大きさ配置が決まる

包含ブロック内に配置されるボックス

ブロックボックス

• ひとかたまりのブロックとして横幅に空スペースがあっても関係なく下に配置されていく。
• ブロックレベル要素が作るブロック。　

前回記事はこちら

インラインボックス

• インライン（行内の一部）要素が作るボックス。
• 続けて横に配置されていく。包含ブロックの幅は超えずに改行され、下図のように配置されていく。

匿名ボックス（ブロック、インライン）

<div>
<p>ここは p要素の中</p>
ここは div要素の直下
</div>

上記のような場合、divが作る包含ブロック内にｐのブロックボックスが配置され、div直下の要素を指定していない「ここはdiv要素の直下」のテキストの部分は匿名ブロックボックスになる。インラインボックスではない。

<p>ここはテキスト
<strong>ここはstrong要素</strong>
ここはテキスト
</p>

上記の場合はstrongのインラインボックス、ｐ直下の要素を指定していない「ここはテキスト」の部分は匿名インラインボックスが形成される。