ボックスモデル

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

HTMLの要素は、基本的にブロックレベル要素とインライン要素の2つに分けられます。要素によってボックスの範囲が異なり、インライン要素には摘要できないスタイルもあるため、CSSを使う上では要素の違いを意識しておくことも重要です。

ここはブロックレベル要素<div>～</div>

ブロックレベル要素は見出し、段落など文書を構成する基本要素となるものです。ブロックレベル要素の内容モデルには、別のブロック要素やインライン要素を含むことができますが、逆にインライン要素の中にブロックレベル要素を置くことはできません。

ここはインライン要素<span>～</span>

インライン要素は、主としてブロックレベル要素の内容として用いられるもので、文書の構造を構成するというより、ブロックレベル要素内の特定の部分になんらかの役割や機能を持たせる要素です。たとえば、ある語句に対してハイパーリンク機能を与えるアンカー要素、特定の語句を強調する要素などです。
インライン要素は、その内容に文字データあるいは他のインライン要素を持つことができますが、ブロックレベル要素を含むことはできません。