要素の外部表示種別

CSSの displayプロパティは、主要なボックス(箱)が流れの設計にどのように関与するかを示します。「〇〇レベルボックス」

ブラウザーの互換性が不十分ですが、CSSの Level 3 仕様書では displayプロパティに２つの値を指定する方法を提示していて、1つ目の値がこの外部表示種別を示すとしています。

CSSの floatプロパティの値が none 以外の場合に、displayプロパティの計算値がdisplayプロパティに２つの値を指定する方法での、１つ目の値に block を指定するに当たる状態に変更されます。

CSSの displayプロパティの値で inline, inline-block, inline-table, inline-flex, inline-grid, rubyは、インラインフォーマットコンテキストに参加するボックスを生成します。このボックスをインラインレベルボックスと言います。その中で、非置換の内容であり内部表示種別が flow である、つまりdisplayプロパティの値が inline であり内容が非置換のボックスをインラインボックスと言います。

この「参加する」は、包含ブロックボックスが匿名のボックスを生成するのにも関わります。(匿名を含む)ブロックコンテナに(匿名を含む)インラインレベルボックスだけが存在すると、そのブロックコンテナはインラインフォーマットコンテキストを新たに確立します。

displayプロパティの初期値は inline です。displayプロパティに継承はないです。なので、要素で指定していない場合は、inline という事です。displayプロパティに２つの値を指定する方法での、１つ目の値に inline ２つ目の値に flow を指定するに当たります。

CSSの displayプロパティの値で block, list-item, table, flex, gridは、ブロックフォーマットコンテキストに参加するボックスを生成します。このボックスをブロックレベルボックスと言います。ブロックレベルのブロックコンテナであるボックスを、ブロックボックスと言います。

displayプロパティに２つの値を指定する方法での、１つ目の値に block を指定するに当たります。

CSSの displayプロパティの値で table-row-group, table-header-group, table-footer-group, table-row, table-cell, table-column-group, table-columnは、テーブルを構成する要素を表します。「テーブルモデルでのレイアウトされる構成要素として参加するボックスを生成する」と言い換えると、「〇〇レベルボックス」の表現と比べ易いかと思います。

CSSの displayプロパティの値で ruby-base, ruby-text, ruby-base-container, ruby-text-containerは、ルビフォーマットコンテキストに参加するボックスを生成します。