CSS box

箱 (CSS)

[6] (ボックス) (box) は、CSS 箱モデルにおけるレンダリングの単位要素です。

仕様書

状態

[11] の持つ状態はいろいろあります。

[12]
における最初基線集合
における最後基線集合
支配的基線
揃え基線

箱の領域

[2] (はこ) (box) は次の4つの領域 (area) で構成されます:

  1. 内容領域
  2. 詰め領域 (省略可能)
  3. 境界領域 (省略可能)
  4. 余白領域 (省略可能)

[3]領域の外周は (へん) (edge) といいます。

  1. 内容辺 (内辺)
  2. 詰め辺
  3. 境界辺
  4. 余白辺 (外辺)

箱の分類

含める範囲の違い

[4] >>3 の4により、内容箱詰め箱境界箱余白箱の4種類のが定義されます。

レンダリングの違い

[5]

歴史

[8] Editorial: link the term "CSS box" and remove parentheticals (zcorpan著, ) https://github.com/whatwg/html/commit/9058fe7ff6961a28fb6e87db55c7dfbbcbd63bb1

[9] Editorial: link the term "CSS box" and remove parentheticals by zcorpan · Pull Request #4659 · whatwg/html () https://github.com/whatwg/html/pull/4659

[10] Factor out "when it generates a box" · Issue #4618 · whatwg/html () https://github.com/whatwg/html/issues/4618