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