基本ボックス

CSSでは、すべての要素がボックスと呼ばれる長方形のボックスを１つ以上生成すると想定しています。
各要素ボックスの中心にはコンテンツエリアがあり、コンテンツエリアの周囲には任意のパディング、ボーダー、マージンがあり、これらの要素はすべて幅を０に設定すれば事実上ボックスから削除できるから、オプションとみなされています。

包含ブロック

すべての要素は、それを包含しているブロックを基準にレイアウトされます。
包含ブロックは要素の「レイアウトコンテクスト」です。

包含ブロックは最も近くにあるブロックレベル、テーブルセル、インラインブロックの祖先ボックスのコンテンツエッジによって形成されます。

html

<div>
  <p>marimo head...</p>
</div>

上記において、pの包含ブロックはdivです。
なぜなら、divはpの１番近くにある、ブロックレベル/テーブルセル/インラインブロックいずれかの祖先要素だからです。
pのレイアウトはdivに依存しています。

インライン要素のレイアウトは包含ブロックに直接依存しません。

要素

要素elementは、CSSの表示の基礎となるものです。
ドキュメントのひとつひとつの要素が、ドキュメントの表示において、ある役割を果たしています。
CSSにおいては、要素がそれぞれの要素を保持するためのボックスを生成することを意味しています。

置換要素と非置換要素

CSSは要素に依存しますが、全ての要素が同等に生成されるわけではありません。(画像と段落は違う)
要素は通常２種類に分けることができます。

置換要素 (replaced element)

置換要素は、要素の内容がドキュメントの内容では直接表せないものと置換えられる要素です。
たとえばimg要素はドキュメント外にある画像と置換えられ、実際のコンテンツは含まれておらず、
外部コンテンツが指定されていないと、何も表示しません。
input要素なども種類に応じて入力ボックスなどに置き換えられます。

非置換要素 (nonreplaced element)

要素の大半が非置換要素です。
これらのコンテンツは、要素自身が生成したボックス内がブラウザによって表示されます。

要素の表示の役割

置換要素と非置換要素に加えてCSSではブロックレベルとインラインレベルの要素が追加されている。

ブロックレベル要素

ブロックレベル要素は、親要素のコンテンツエリアを埋める要素ボックスを生成するので、この要素の隣に他の要素を置くことはできません。
ブロックレベルの要素は要素ボックスの前後に改行を生成します。

インラインレベル要素

インラインレベル要素は、行の流れを断ち切ることなく、テキスト行に要素ボックスを生成します。
インラインレベル要素は要素ボックスの前後に改行を生成しません。
別の要素のコンテンツで囲んでも、表示が分断されることはありません。