[4] 行内書式付け文脈において行内箱は水平方向に順に配置され、行lineを形成します。 この時、1つの行を形成する行内箱を含んだ矩形の領域rectangular areaのことを行箱line boxといいます。

仕様書

レンダリング

水平方向

幅と左右の位置

[5] 行箱の幅widthは包含ブロックと、浮動floatが存在するか否かによって決まります。 >>3

[10] 左辺left edgeは包含ブロックの左辺に接します。 右辺right edgeは包含ブロックの右辺に接します。 ただし、浮動箱floating boxが包含ブロックの辺と行箱の辺の間に入ることもあります。 >>3

ですから、同じ行内書式付け文脈にある行箱は通常はすべて同じ幅で、包含ブロックの幅と同じになるわけですが、 浮動floatによって利用可能な水平方向の空間が限られているなら、 行幅同士で変わってくることもあります。>>3

字揃え

[13] 行内の行内箱の幅の和が行箱の幅よりも小さい時には行箱の中身の水平方向の分布は 'text-align' 特性によって決まります。 'justify' なら利用者エージェントは行内箱 (行内表箱inline-table boxや行内ブロック箱inline-block boxを除きます。) の中の間隔spaceや語wordを伸長stretchして構いません。 >>3 'left' なら左に、 'right' なら右に詰めて配置されます。

垂直方向

高さ

[12] 行箱は包含ブロックの上topから順に並べられます。

[6] 行箱の高さheightは、...

[7] 行箱の高さはそれに含まれる箱のいずれよりも大きいです。 各箱の高さが行箱より小さい時の垂直方向の揃え方は 'vertical-align' 特性で決まります。 揃え方によっては一番高さの大きな箱の高さよりも行箱の高さの方が大きくなることもあります。 >>3

[11] 同じ行内書式付け文脈にある行箱は、通常はそれぞれ違った高さを持ちます。 >>3

積み重ね

[8] 1つの行箱の中で行内箱を水平方向に収めることができない時には、 複数の行箱を垂直方向に積み重ねてstack、そこに分けて当てはめます。 >>3

[9] 行箱を積み重ねる場合には、互いに重ならずに隙間も開けずに配置されます。 >>3

行内箱の分割

[14] 行内箱の幅が行箱の幅を超える場合には、行内箱は複数の箱に分割splitされて、 それぞれが複数の行箱にわたって配置されます。行内箱が分割できない場合、例えば

... などには行内箱は行箱を溢れるoverflowことになります。 >>3

[15] 行内箱が分割される時に余白、境界線、詰めの見た目は変化しません。>>3 従って、例えば周囲に境界線が描かれる行内箱が2つに分割された場合、分割されることによって生じた辺は境界線が描かれません。

[16] 行内箱は双方向性テキスト処理bidirectional text processingによって同じ行箱の中であっても複数に分割されることがあります。 >>3

零高行箱

[17] 行箱は、

... なら、零高行箱zero-height line boxとして扱わなければなりません。 余白の collapse においては零高行箱は無視しなければなりません。 >>3

関連

[18] 相対配置による移動は一旦通常フローで配置が行われた後に行われます。 従って、移動は行箱の高さが確定した後に行われるため、相対配置の垂直方向の移動によって箱が行箱からはみ出すこともあります。

メモ

[1] CSS3 module: line ( 版) http://dev.w3.org/cvsweb/~checkout~/csswg/css3-linebox/Overview.html?content-type=text/html;%20charset=utf-8

[19] Gloss the CSS term "line box" · whatwg/html@59ffb6e ( 版) https://github.com/whatwg/html/commit/59ffb6e5774f34c307022b832893f38e701f2c36