Cascading Style Sheets (CSS) Level 2

8.3.1. ~marginの相殺-法

~CSSにおいては、 2 個以上の（互いに同胞【同じ親を共有する子】とは限らない）~boxの いくつかの~marginが互いに`連接して$いるときには， 単独の~marginを形成するように結合され得る。 この仕方で~marginたちを結合することを `相殺-@（ `collapse^en ） するという†。 結合された結果の~margin【または, それを成す~marginたち】は、 `相殺された~margin@ （ `collapsed margin^en ） と呼ばれる。 ◎ In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

【† すなわち、 ~margin区画のみ互いに重なり得る下で， 可能な限り互いの間を詰める。 】

`連接して$いる縦方向~marginは、 次に挙げる場合を除き，`相殺され$る： ◎ Adjoining vertical margins collapse, except:

• `根~要素$により生成される~boxの~marginは、 他の~marginとは`相殺され$ない。 ◎ Margins of the root element’s box do not collapse.
• `~clearance$を伴う要素の［ 上端~margin, 下端~margin ］が`連接して$いる場合、 それらの~marginは，それに`連接して$いる［ 後続する同胞の~margin ］とは`相殺され$るが、 その結果の~marginは，親~塊の下端~marginとは`相殺され$ない。 ◎ If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block.

横方向~marginどうしは、 決して`相殺され$ない。 ◎ Horizontal margins never collapse.

【 CSS2 は縦書きを~supportしないので，縦方向に限定されているが、 より一般には，`塊-軸$~marginに限り相殺される。 】

２つの~marginが `連接して@ いる（ `adjoining^en ）とは、 ~AND↓ が満たされることをいう： ◎ Two margins are adjoining if and only if:

• 当の~marginを有する両~boxは、 同じ`塊~整形~文脈$に関与していて，次を満たす ⇒ `~flow内$にある`塊~level$である。 ◎ both belong to in-flow block-level boxes that participate in the same block formatting context

• 両~marginを分離するような［ `行l~box$／`~clearance$／`~padding$／`~border$ ］は無い。 ◎ no line boxes, no clearance, no padding and no border separate them＼

  注記： この目的においては `ある種の縦幅 0 である行l~box＠#phantom-line-box$は、 無視されることに注意 （`§ 9.4.2＠#inline-formatting$を見よ）。 ◎ (Note that certain zero-height line boxes (see 9.4.2) are ignored for this purpose.)

• 両~marginとも，縦方向に隣接な~box辺に属する — すなわち、 両者は，以下に挙げるいずれかの~pairを成す： ◎ both belong to vertically-adjacent box edges, i.e. form one of the following pairs:

  • ~boxの上端~marginと, ~boxの最初の［ `~flow内$にある子 ］の上端~margin ◎ top margin of a box and top margin of its first in-flow child
  • ~boxの下端~marginと, ~boxの次の［ `~flow内$にある後続する同胞 ］の上端~margin ◎ bottom margin of box and top margin of its next in-flow following sibling
  • ［ `height$p の算出d値が `auto^v である ］ような~boxの下端~marginと, ~boxの最後の［ `~flow内$にある子 ］の下端~margin。 ◎ bottom margin of a last in-flow child and bottom margin of its parent if the parent has auto computed height

  • ~AND↓ を満たす~boxの［ 上端~marginと下端~margin ］：

    • 新たな塊~整形~文脈を確立しない
    • `min-height$p の算出d値は 0
    • `height$p の算出d値は 0 または `auto^v
    • `~flow内$にある子は無い
    ◎ top and bottom margins of a box that does not establish a new block formatting context and that has zero computed min-height, zero or auto computed height, and no in-flow children

`相殺された~margin$は、 それを成す いずれかの~margin成分が，別の~marginと`連接して$いるならば、 その別の~marginとも`連接して$いるものと見なされる。 ◎ A collapsed margin is considered adjoining to another margin if any of its component margins is adjoining to that margin.

注記： `連接して$いる~marginたちは、 同胞や先祖の関係にない要素たちから生成されることもある。 ◎ Note. Adjoining margins can be generated by elements that are not related as siblings or ancestors.

二つ以上の~marginが`相殺され$るときの結果の~margin幅は、 各`相殺された~margin$幅の最大になる。 負な~marginが混じっている場合、 それらの絶対~値の最大が，正な~marginの最大（正な~marginが無ければ 0 ）から差引かれる。 ◎ When two or more margins collapse, the resulting margin width is the maximum of the collapsing margins' widths. In the case of negative margins, the maximum of the absolute values of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. If there are no positive margins, the maximum of the absolute values of the adjoining margins is deducted from zero.

ある~boxの［ 上端~margin, 下端~margin ］が`連接して$いる場合、 他の~marginたちが，そのような~marginを `挟むように相殺-@ する（ `collapse through^en ）ことも起こり得る。 この場合の~boxの位置は、［ 【その~boxを生成した要素と】 `相殺された~margin$を成す他の要素 ］との関係性に依存する： ◎ If the top and bottom margins of a box are adjoining, then it is possible for margins to collapse through it. In this case, the position of the element depends on its relationship with the other elements whose margins are being collapsed.

• ［ 要素の~margin, 要素の親の上端~margin ］が`相殺され$ている場合、 要素の~boxの上端~border辺は， 親のそれと同じ位置になるものと定義される。 ◎ If the element’s margins are collapsed with its parent’s top margin, the top border edge of the box is defined to be the same as the parent’s.
• 他の場合、 要素の親の~marginのうち，~margin相殺の一部を成すものは、 ないか, または下端~marginのみ，のいずれかになる。 この場合の要素の上端~border辺の位置は、 要素の下端~borderが 0 でなかったとき 【すなわち，要素の上端~marginと下端~marginとが連接してなく，相殺されなかったとき】 と同じになる。 ◎ Otherwise, either the element’s parent is not taking part in the margin collapsing, or only the parent’s bottom margin is involved. The position of the element’s top border edge is the same as it would have been if the element had a non-zero bottom border.

要素の~marginが`挟むように相殺-$されている場合、 その位置が［ その~marginを挟んでいる他の~margin ］を持つ要素の位置に効果を及ぼすことはないことに注意 — 要素の上端~border辺の位置が要求されるのは、 これらの要素の子孫を~lay-outするときに限られる。 ◎ Note that the positions of elements that have been collapsed through have no effect on the positions of the other elements with whose margins they are being collapsed; the top border edge position is only required for laying out descendants of these elements.

9.1.1. 表示域

`連続的~媒体$用の~UAは、 一般に，利用者が文書とやりとりするための `表示域@ （ `viewport^en — ~screen上の~UIwindowあるいは見えている区画） を提供する。 ~UAは、 表示域が~resizeされたときには， 文書の~layoutを変更してもヨイ （`初期~包含塊$を見よ）。 ◎ User agents for continuous media generally offer users a viewport (a window or other viewing area on the screen) through which users consult a document. User agents may change the document’s layout when the viewport is resized (see the initial containing block).

~UAは、 表示域が［ `~canvas$内の，文書が描画される区画 ］より狭いときは，~scroll用の仕組みを提供するべきである。 ◎ When the viewport is smaller than the area of the canvas on which the document is rendered, the user agent should offer a scrolling mechanism.

表示域は，`~canvas$ごとに高々一つまでであるが、 ~UAは，複数の~canvasに描画してもヨイ （すなわち、 同じ文書に対する複数の~viewを~~同時に供してもヨイ）。 ◎ There is at most one viewport per canvas, but user agents may render to more than one canvas (i.e., provide different views of the same document).

9.1.2. 包含塊

~CSS2においては、 多くの~boxの位置と~sizeは，包含塊（ `containing block^en ）と呼ばれる矩形な~boxの各~辺を基準に計算される。 一般に、 生成された~boxは，子孫~box用の包含塊として動作する。 このことを、 ~boxは，（その子孫たち用の）包含塊を “確立する” という。 “~boxの包含塊” という句は、 “~boxが確立するそれ” ではなく， “~boxは その包含塊の中に居る” ことを意味する。 ◎ In CSS 2, many box positions and sizes are calculated with respect to the edges of a rectangular box called a containing block. In general, generated boxes act as containing blocks for descendant boxes; we say that a box "establishes" the containing block for its descendants. The phrase "a box’s containing block" means "the containing block in which the box lives," not the one it generates.

各~boxには，その包含塊を基準にする位置が与えられるが、 この位置は，この包含塊の~~枠内から`~overflow$することもある。 ◎ Each box is given a position with respect to its containing block, but it is not confined by this containing block; it may overflow.

包含塊の寸法を計算する方法の詳細は、 `§ 包含塊の定義＠#containing-block-details$ にて述べる。 ◎ The details of how a containing block’s dimensions are calculated are described in the next chapter.

9.2.1. 塊~levelの要素と塊~box

`塊~levelの要素@ とは、 視覚的に塊として整形される~source文書の要素である（例： 段落など）。 要素を塊~levelにするような `display!p ~propの値には，［ `block$v, `list-item$v, `table$v ］がある。 ◎ Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the display property make an element block-level: block, list-item, and table.

`塊~levelの~box@ は、 `塊~整形~文脈$に関与する~boxである†。 各`塊~levelの要素$は、 `首要~box@ （ `principal box^en ）と呼ばれる，塊~levelの~boxを生成する。 首要~boxが、 子孫の~boxと `生成d内容＠~CSS22/generate.html$ を包含し、 また，`位置決め~scheme$に関わる~boxになる。 ◎ Block-level boxes are boxes that participate in a block formatting context. Each block-level element generates a principal block-level box that contains descendant boxes and generated content and is also the box involved in any positioning scheme.

【† “関与する（ `participate^en ）”： 言い換えれば、［ `~box~tree$の中で，~boxの先祖~boxであって, かつ`整形~文脈$を確立しているもの ］のうち，~boxに最も近い先祖は、［ 種別が “塊” である`整形~文脈$ ］を確立していて，~boxの~layoutは［ その種別の整形~文脈に定義される規則 ］により統制される。 】

塊~levelの要素には、 `首要~box$の他に追加的な~boxを生成させるものもある — `display!p が `list-item$v にされた要素など。 これらの追加的な~boxは、 `首要~box$を基準に配置される。 ◎ Some block-level elements may generate additional boxes in addition to the principal box: list-item elements. These additional boxes are placed with respect to the principal box.

［ `~table~box$, `置換d要素$ ］を除き，塊~levelの~boxは、 `塊~容器~box$でもある。 `塊~容器~box@ は、 塊~levelの~boxのみを包含するか，または `行内~整形~文脈$を確立する — すなわち，行内~levelの~boxのみを包含する。 `塊~容器~box$には、 `塊~level$でないものもある — `置換され$ない［ 行内~塊（ `inline-block$v ）／ ~table~cell（ `table-cell$v ） ］は塊~容器であるが、 塊~levelの~boxではない。 塊~levelの~boxであって, 塊~容器でもあるものは、 `塊~box@ とも呼ばれる。 ◎ Except for table boxes, which are described in a later chapter, and replaced elements, a block-level box is also a block container box. A block container box either contains only block-level boxes or establishes an inline formatting context and thus contains only inline-level boxes. Not all block container boxes are block-level boxes: non-replaced inline blocks and non-replaced table cells are block containers but not block-level boxes. Block-level boxes that are also block containers are called block boxes.

3 種の用語 “`塊~levelの~box$”, “`塊~容器~box$”, “塊~box” は、 多義的にならない所では，単に “塊” と略称されることもある。 ◎ The three terms "block-level box," "block container box," and "block box" are sometimes abbreviated as "block" where unambiguous.

【 `整形~文脈$における これらの~boxの役割については、 `§ 9.4.X＠#_overview-of-formatting-context$ にて，俯瞰する。 】

<div>
  Some text
  <p>More text
</div>

p    { display: inline }
span { display: block }

<body>
<p>
`span^c の前にある匿名~text
<span>`span^c の内容</span>
`span^c の後にある匿名~text
</p>
</body>

9.2.2. 行内~levelの要素と行内~box

`行内~levelの要素@ は、 ~source文書の要素であって，その内容により，新たな塊が形成されないものである†。 その内容 （例：段落の中で強勢される~text片, 行内~画像, 等々）は、 何~行lかに分布する。 `display!p ~propに対する値［ `inline$v, `inline-table$v, `inline-block$v ］は、 要素を行内~levelにする。 ◎ Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). The following values of the display property make an element inline-level: inline, inline-table, and inline-block.

`行内~levelの要素$は、 `行内~levelの~box@ を生成する。 それは、 `行内~整形~文脈$に関与する~boxである。 ◎ Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context.

【† 実際には，前節の例のように塊を生成する要素を包含することもあるので、 この定義は厳密さに欠く。 （`課題 #1477＠~CSSissue/1477$） 】

<p>ある<em>強勢された</em>テキスト</p>

9.2.3. 同行見出し（ `run-in^en ）~box

この節は、 以前の草案と節~番号を揃えるためにある。 `display$p 用の `run-in^v 値は、 今や CSS3 （`CSS basic box model＠~TR/css3-box$ 【 `CSS-DISPLAY-4$r `§ 同行見出し~layout＠~CSSDISP#run-in-layout$】 にて定義される。 ◎ [This section exists so that the section numbers are the same as in previous drafts. 'display: run-in' is now defined in CSS level 3 (see CSS basic box model).]

9.2.4. `display^p ~prop

この~prop用の各種~値の意味は： ◎ The values of this property have the following meanings:

`block@v

この値は、 要素に`塊~box$を生成させる。 ◎ This value causes an element to generate a block box.

`inline-block@v

この値は、 要素に`行内~level$の`塊~容器$を生成させる。 `inline-block^v の内側は，`塊~box$として整形される一方で、 要素それ自身は`不可分な行内$として整形される。 ◎ This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

`inline@v

この値は、 要素に一つ以上の`行内~box$を生成させる。 ◎ This value causes an element to generate one or more inline boxes.

`list-item@v

この値は、 要素に`首要$`塊~box$に加えて，~marker~boxも生成させる （例：~HTMLの `li^e ）。 ~list, および その整形の例については、 `§ ~list＠~CSS22/generate.html#lists$ に諮られたし。 ◎ This value causes an element (e.g., LI in HTML) to generate a principal block box and a marker box. For information about lists and examples of list formatting, please consult the section on lists.

`none@v

この値は、 要素が`整形~構造$に現れないようにする （すなわち，視覚-媒体においては、 要素は，~boxを生成せず, ~layoutに効果を及ぼすこともなくなる）。 要素のどの子孫も，~boxを生成しなくなり、 要素とその内容は，整形~構造から全面的に除去される。 子孫に `display$p ~propを設定しても， この挙動が上書きされることはない。 ◎ This value causes an element to not appear in the formatting structure (i.e., in visual media the element generates no boxes and has no effect on layout). Descendant elements do not generate any boxes either; the element and its content are removed from the formatting structure entirely. This behavior cannot be overridden by setting the display property on the descendants.

値 `none$v は、 不可視な~boxを作成するものではないことに注意。 それは、 ~boxを まったく作成させなくする。 ~CSSには、 要素が［ 整形に影響しつつ，それ自身は可視でない【すなわち，透明な】~box ］を`整形~構造$内に生成する仕組みもある。 詳細は、 `§ 可視性＠~CSSDISP#visibility$に諮られたし。 ◎ Please note that a display of none does not create an invisible box; it creates no box at all. CSS includes mechanisms that enable an element to generate boxes in the formatting structure that affect formatting but are not visible themselves. Please consult the section on visibility for details.

`table@v

`inline-table@v

`table-*$t

これらの値は、 要素を `table^e 要素の様に挙動させる （`§ ~table＠~CSS2TABLE$ に述べられる制約の~subjectになる）。 ◎ These values cause an element to behave like a table element (subject to restrictions described in the chapter on tables).

ここで：

`table-*@t
	= `table-row-group@v
	| `table-header-group@v
	| `table-footer-group@v
	| `table-row@v
	| `table-column-group@v
	| `table-column@v
	| `table-cell@v
	| `table-caption@v

これらの値の意味は、 `§ ~table~model＠~CSS2TABLE#table-display$にて定義される。

【 この `table-*^t は、 他から簡潔に参照できるよう，この訳に導入した非公式な値~型である （これらの値は、 ~table整形~文脈に関与する~boxを生成させる）。 】

算出d値は、 指定d値と同じになる。 ただし，［ `有位置$な要素, `浮動~要素$, `根~要素$ ］に対する場合は除く — § `display^p, `position^p, `float^p の関係性 を見よ。 ◎ The computed value is the same as the specified value, except for positioned and floating elements (see Relationships between display, position, and float) and for the root element. For the root element, the computed value is changed as described in the section on the relationships between display, position, and float.

`display$p の`初期~値$は `inline$v とされているが、 多くの要素では，この値は［ ~UAの`既定の~stylesheet＠~CSS22/cascade.html#default-style-sheet$による規則で`上書き＠~CSS22/cascade.html#cascade$され得る ］ことに注意。 `HTML401$r 用の`~stylesheetの見本＠~CSS22/sample.html#html-stylesheet$を見よ†。 ◎ Note that although the initial value of display is inline, rules in the user agent’s default style sheet may override this value. See the sample style sheet for HTML 4 in the appendix.

【† 現代の~HTML（ `HTML$r ）における~UA~stylesheetは、 その `§ 具現化＠~HTMLrendering$ に定義される。 】

p   { display: block }
em  { display: inline }
li  { display: list-item } 
img { display: none }      /* 
画像は表示させない
◎
Do not display images
 */

9.3.1. 位置決め~schemeの~~選択： `position^p ~prop

【 この節の内容は、 今や `CSS-POSITION-3$r `§ 位置決め~schemeの~~選択＠~CSSPOS#position-property$ にて定義されるので，和訳は省略する。 】

9.3.2. ~boxの~offset： `top^p, `right^p, `bottom^p, `left^p

【 この節の内容は、 今や `CSS-POSITION-3$r `§ ~box~inset＠~CSSPOS#insets$ にて定義されるので，和訳は省略する。 】

9.4.X. 【塊~整形~文脈における各種~boxの~~位置付け】

【 この節は、 訳者による注釈である。 】

この節では、 この仕様が定義する各種~boxの，整形~文脈における~~位置付けについての（ CSS3 も視野に入れた）説明を試みる （この節は、 何かを定義するものではない）。 尚、 ここでは`首要~box$でない~boxは~~脇に置く。

視覚的な~layoutは、 ~boxたちが成す~tree構造に基いて行われる。 これは、 `~box~tree$, あるいは描画~treeとも呼ばれている （これは，概ね`要素~tree$【！文書~tree】の構造を反映するが、 文書~treeの一部は，~box~treeの中では別の場所に組み替えられることもある — `絶対的に位置され$た要素など）。 整形~文脈は、 この~box~treeの中のある下位treeを表現する。 上述の様に，整形~文脈にはいくつかの種別があり、 ある整形~文脈に関与する~boxの~layoutは，その種別に定義される規則により統制される。

整形~文脈の下位treeの中で，新たな整形~文脈を確立するものは、 親の整形~文脈の視点からは，末端の（ “不透明な” ）~boxになる。 すなわち、 子孫の整形~文脈に関与する内容の~layoutには，親の整形~文脈による統制は及ばない — 及ぶのは、 子~整形~文脈の根である末端~boxの~size／位置に限られる。 一般に、 ~CSSに規定される~layout特能のほとんどは，整形~文脈を超えて影響しあうことはない （`浮動体$は、 塊~整形~文脈と行内~整形~文脈との間で影響しあう点で特別だが）。

この仕様が定義する`塊~整形~文脈$を成す下位treeにおいては：

• 根~自身が末端でないときは：

  • 根~以外のすべての~boxは、 `塊~levelの~box$である。 そのうち，`浮動~box$のみが`~flow外$にある。
  • 末端~以外のすべての~boxは、 （`塊~levelの~box$を包含する方の）`塊~容器$である。
  • よって、 末端でも根でもない すべての~boxは，`塊~box$になる。

• 末端の~boxは、 次の３種に大別される：

  • `行内~整形~文脈$を確立するもの （塊~levelの~boxを包含しない方の`塊~容器~box$）。 次項に該当しない，内容が空な~boxは、 形式的に［ 0 個の`行l~box$を生成する`行内~整形~文脈$を確立する ］ものと見做す下で、 ここに分類される。
  • 行内~整形~文脈でない`整形~文脈$を確立するもの — 例えば、 ~table~layout, あるいは`~flex~layout$などの CSS3 で定義される各種~整形~文脈。 塊~整形~文脈も末端に入子にされ得る。 `overflow$p が `visible^v でないものや，`浮動~box$は、 ここに分類される。
  • 置換d要素。 （言い換えれば、 “~CSSからは未知な整形~文脈” を確立するもの。）
• 根~boxは、 別の整形~文脈の末端であるか，~box~tree全体（`根~要素$が確立する整形~文脈）の根になる。 親の整形~文脈が`行内~整形~文脈$である（したがって，`行内~levelの~box$である）ような 根~boxは、 特に，`不可分な行内$と呼ばれ、 複数の行l~boxに分断されて~flowされることはない。

`行内~整形~文脈$は、 親の整形~文脈が`塊~整形~文脈$でないならば，暗黙的に塊~整形~文脈も成すと見なされる点で特別な地位にある（すなわち，この塊~整形~文脈の根~自身が末端の行内~整形~文脈を確立する）。 言い換えれば、 “塊~level”／“行内~level” の区別が意味を成すのは，`塊~整形~文脈$の中に限られる — 他の種別の`整形~文脈$の中の行内~levelの~boxは、 常に塊~整形~文脈の中に包装されることになるので（塊~整形~文脈, 行内~整形~文脈をひっくるめたものは、 `~flow~layout＠~CSSDISP#flow-layout$とも呼ばれている）。 “塊~容器” という用語は、 `塊~整形~文脈$でない整形~文脈の中で利用されることもある — その場合、 塊~容器~自身が塊／行内~整形~文脈を確立していることを含意する。 また，塊／行内~整形~文脈でない整形~文脈においては、 通例，~boxは浮動されないことになる（ `float$p を非 `none^v に設定しても~~効果はない） — その文脈における挙動が新たに定義されない限り。 したがって、 浮動という用語は，塊~整形~文脈の~~存在を含意することになる。

9.4.1. 塊~整形~文脈

`塊~整形~文脈$の下では、 各~boxは，包含塊の上端から, 縦方向に, 順々に，~lay-outされる。 2 個の同胞~boxの縦方向の~~間隔は、 それらの `margin$p ~propにより決定される。 同じ`塊~整形~文脈$に関与する，隣り合う`塊~levelの~box$では、 その合間の縦方向~marginは，`相殺され$る。 ◎ In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the margin properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

`塊~整形~文脈$の下では、 各~boxの左端~外縁~辺は， 包含塊の左端~辺に接する（右横書き整形に対しては右端~辺どうしが接する）。 このことは、 `浮動体$が存在していても成り立つ（~box内の `行l~box$ は、 浮動体に因り縮短され得るが） — その~boxが，新たな`塊~整形~文脈$を確立するのでない限り （この場合、 ~box自身は，浮動体に因り`より幅狭になり得る＠#bfc-next-to-float$）。 ◎ In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box’s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

`~paged媒体$における~page分断については、 `§ 許容される~page分断＠~CSS22/page.html#allowed-page-breaks$に諮られたし。 ◎ For information about page breaks in paged media, please consult the section on allowed page breaks.

9.4.2. 行内~整形~文脈

行内~整形~文脈の下では、 ~boxたちは，その包含塊の上端から, 横方向に，順々に~lay-outされていく。 これらの~boxの合間の横方向［ ~margin／~border／~padding ］は、 尊重される†。 一連の~boxが縦方向に整列される仕方は、 様々になり得る： それらの下端／上端が，互いに整列されることもあれば、 それらの~textの基底線が 互いに整列されることもある。 ある一つの行lを形成する~boxたちを包含する矩形な区画は、 `行l~box@ と呼ばれる。 ◎ In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.

【† 行内~levelの`置換され$ない要素に対しては、 縦方向の~marginによる`効果はない＠~CSSBOX#margin-physical$。 また，［ ~border／~padding ］は、 縦方向でも効果はあるが，行l~boxの縦幅には影響しない（`下に例を示す＠#_vertical-effect$）。 】

`行l~box$の横幅は、 その`包含塊$と, `浮動体$の有無により決定される。 `行l~box$の縦幅は、 `§ 行高の計算＠#line-height$ に与える規則から決定される。 ◎ The width of a line box is determined by a containing block and the presence of floats. The height of a line box is determined by the rules given in the section on line height calculations.

`行l~box$の~~高さは、 常に，それを形成しているすべての~boxを包含するに十分な~~高さにされる。 しかしながら，この~~高さは、 それらの~boxの~~高さの最大よりも高くなる場合もある （例えば、 ~boxたちが互いの基底線が~~揃うように整列されている場合）。 ~box %B の縦幅が`行l~box$より狭い場合の，その行l~boxの中での %B の縦方向の整列は、 `vertical-align$p ~propにより決定される。 ◎ A line box is always tall enough for all of the boxes it contains. However, it may be taller than the tallest box it contains (if, for example, boxes are aligned so that baselines line up). When the height of a box B is less than the height of the line box containing it, the vertical alignment of B within the line box is determined by the vertical-align property.＼

`行内~levelの~box$たちが単独の`行l~box$の中に横方向に収まり切らない場合、 収まり切らない部分は，次の`行l~box$に折り~~返され 【これは、1 個の行内~levelの~boxを複数個の行l~boxに分断し得る】 、 縦方向に堆積されていく。 したがって、 段落は，縦方向に堆積する`行l~box$たちからなる。 `行l~box$たちが堆積されるときは、 （他から指定されない限り）縦方向に離されることなく，また 重合することも決してない。 ◎ When several inline-level boxes cannot fit horizontally within a single line box, they are distributed among two or more vertically-stacked line boxes. Thus, a paragraph is a vertical stack of line boxes. Line boxes are stacked with no vertical separation (except as specified elsewhere) and they never overlap.

一般に、 `行l~box$の［ 左端~辺／右端~辺 ］は，その包含塊の［ 左端~辺／右端~辺 ］に接する。 しかしながら、 包含塊の辺と`行l~box$辺の合間に，浮動~boxが来ることもある。 したがって、 同じ`行内~整形~文脈$ 内の`行l~box$たちの横幅は，一般的には同じ（包含塊の横幅）になるが、 横方向に可用な空間が`浮動体$に因り抑制される場合には，変わり得ることになる。 また、 一般に，同じ`行内~整形~文脈$に関与する各`行l~box$の縦幅も，まちまちになり得る（例：背が高い画像を包含する行lと, ~textのみを包含する行lなど）。 ◎ In general, the left edge of a line box touches the left edge of its containing block and the right edge touches the right edge of its containing block. However, floating boxes may come between the containing block edge and the line box edge. Thus, although line boxes in the same inline formatting context generally have the same width (that of the containing block), they may vary in width if available horizontal space is reduced due to floats. Line boxes in the same inline formatting context generally vary in height (e.g., one line might contain a tall image while the others contain only text).

同じ`行l~box$上にある一連の`行内~levelの~box$の横幅の合計が，その行l~boxの横幅より狭い場合、 その行l~boxにおける，それらの横方向の分布は、 `text-align$p ~propにより決定される。 その~propの値が `justify^v 【 “両端揃え” 】 ならば、 ~UAは，`行内~box$ （ただし，［ `inline-table^v, `inline-block^v ］~boxは除く） 内の~spaceや単語を伸張してもヨイ。 ◎ When the total width of the inline-level boxes on a line is less than the width of the line box containing them, their horizontal distribution within the line box is determined by the text-align property. If that property has the value justify, the user agent may stretch spaces and words in inline boxes (but not inline-table and inline-block boxes) as well.

`行l~box$の横幅を超過するような`行内~box$は、 複数の`行l~box$にわたるように，いくつかの~boxに分割される。 分割できない`行内~box$は、 `行l~box$を~overflowする（例： 単独の文字からなる`行内~box$ ／ 言語に特有な単語~分断ng規則から `行内~box$の中での分断【 “~~改行” 】が許容されていない ／ `行内~box$に対する `white-space$p 値が `nowrap^v または `pre^v にされている）。 ◎ When an inline box exceeds the width of a line box, it is split into several boxes and these boxes are distributed across several line boxes. If an inline box cannot be split (e.g., if the inline box contains a single character, or language specific word breaking rules disallow a break within the inline box, or if the inline box is affected by a white-space value of nowrap or pre), then the inline box overflows the line box.

`行内~box$が分割されるとき、 どの分割-の切り口の所でも，［ ~margin／~border／~padding ］による視覚的な効果はない。 ◎ When an inline box is split, margins, borders, and padding have no visual effect where the split occurs (or at any split, when there are several).

`行内~box$は、 `双方向-~text処理＠#direction$に因り， 同じ`行l~box$の中であっても，複数の~boxに分割されることもある。 ◎ Inline boxes may also be split into several boxes within the same line box due to bidirectional text processing.

【† この “保全d空白” には，改行文字も含まれる。 】【†† この 0 は、 横方向~margin用の `auto^v 値も含む（行内~要素に対しては，その使用~値は 0 になるので）。 また、 縦方向の［ ~margin, ~padding, ~border ］は何であれ，上の条件に影響しない （それは、 `行l~boxの縦幅に影響しない＠#_vertical-effect$ので）。 】【††† その行l~boxを生成させた要素の，子孫が生成する~box。 】【†††† 例えば、 `浮動体$の`現在の行l$の位置。 】

<p>いくつかの<em>強勢された単語</em>が，
<strong>この文の中</strong>に現れています。</p>
◎
<p>Several <EM>emphasized words</EM> appear
<strong>in this</strong> sentence, dear.</p>

いくつかの強勢された単語が，この文の中に現れています。
◎
Several emphasized words appear in this sentence, dear.

いくつかの強勢された単語が，
この文の中に現れています。
◎
Several emphasized words appear
in this sentence, dear.

いくつかの強勢された
単語が，この文の中
に現れています。
◎
Several emphasized  
words appear in this 
sentence, dear.

前の例では、 `em^e ~boxは， 2 個の `em^e ~boxたちに分割された （以下 `前半^V, `後半^V と記す）。 この~box用の［ ~margin, ~border, ~padding, ~text装飾 ］は、［ `前半^V の~~終端／ `後半^V の~~始端 ］に対しては可視~効果を持たない。 ◎ In the previous example, the EM box was split into two EM boxes (call them "split1" and "split2"). Margins, borders, padding, or text decorations have no visible effect after split1 or before split2.

em {
  padding: 2px;
  margin: 1em;
  border: medium dashed;
  line-height: 2.4em;
  background: yellow;
  color: green;
}

9.4.3. 相対~位置決め

【 この節の内容は、 今や `CSS-POSITION-3$r `§ 相対~位置決め＠~CSSPOS#relpos-insets$ にて定義されるので，和訳は省略する。 】

9.5.1. 浮動体の位置決め： `float^p ~prop

この~propは、 ~boxが浮動すべきかどうか，浮動するならば［ 左方, 右方 ］どちらへ浮動するかを指定する。 どの要素にも設定し得るが、 `絶対的に位置され$た~boxを生成する要素には適用されず， その算出d値も~~改められることになる — `§ 9.7＠#dis-pos-flo$を見よ。 ◎ This property specifies whether a box should float to the left, right, or not at all. It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned.＼

【† ~CSS2に限らなければ、 `適用され$ないものは他にもある。 ~CSS2では定義されない多くの~layout~model（例：`~flex~layout$）においては、 この~propは，それらの整形~文脈に関与する~box（例：`~flex駒$）には`適用され$ない。 】

各種~値の意味は： ◎ The values of this property have the following meanings:

`left@v

要素は、 左浮動~box — 左方へ浮動される`塊~box$ — を生成する。 周りの内容は、 ~boxの右~脇に, かつ ~boxの上端から~flowする（ `clear$p ~propの~subjectになる）。 ◎ The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the clear property).

`right@v

要素は、 右浮動~box — 右方へ浮動される`塊~box$ — を生成する。 周りの内容は、 ~boxの左~脇に, かつ ~boxの上端から~flowする（ `clear$p ~propの~subjectになる）。 ◎ Similar to left, except the box is floated to the right, and content flows on the left side of the box, starting at the top.

`none@v

~boxは浮動されない。 ◎ The box is not floated.

~UAは、 `根~要素$に対しては，その `float$p を `none$v に扱ってもヨイ。 ◎ User agents may treat float as none on the root element.

1. 所与の左浮動~box %L に対し ⇒ %L の左端は， %L の`包含塊$の左端より左に位置しない

   右浮動~boxについても相似的な規則が課されるとする。

   ◎ The left outer edge of a left-floating box may not be to the left of the left edge of its containing block. An analogous rule holds for right-floating elements.

2. 所与の左浮動~box %L1, %L2 に対し， %L1 は %L2 に`先行する$ならば、 ~OR↓ が満たされる：

   • %L1 の右端は， %L2 の左端より右に位置しない
   • %L1 の下端は， %L2 の上端より下に位置しない

   右浮動~boxについても相似的な規則が課されるとする。

   ◎ If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.
3. 所与の左浮動~box %L, 右浮動~box %R に対し， %L, %R の`側方$が重合するならば ⇒ %L の右端は， %R の左端より右に位置しない ◎ The right outer edge of a left-floating box may not be to the right of the left outer edge of any right-floating box that is next to it. Analogous rules hold for right-floating elements.
4. 所与の浮動~box %F に対し ⇒ %F の上端は、 %F の`包含塊$の上端より上に位置しない ◎ A floating box’s outer top may not be higher than the top of its containing block.＼
5. `相殺され$る 2 つの~marginの合間にある浮動体は、［ その`~flow$の一部を成す，浮動体の他は内容が空な`匿名~塊~box$である親 ］があるかのように位置される。 【浮動体の`現在の行l$は、この親に包含される縦幅 0 の行l~boxになる。】 そのような親の位置は、 `§ ~margin相殺の規則＠#collapsed-through$にて定義される。

   <div style="margin-bottom:1em;">塊</div>
   <span style="float:left;">左浮動~box</span>
   <div style="margin-top:1em;">塊</div>
   

   塊

   左浮動~box

   塊

   ◎ When the float occurs between two collapsing margins, the float is positioned as if it had an otherwise empty anonymous block parent taking part in the flow. The position of such a parent is defined by the rules in the section on margin collapsing.
6. 所与の浮動~box %F, および %F に`先行する$［ `塊~box$／`浮動~box$ ］ %B に対し ⇒ %F の上端は %B の外縁~上端~辺より上に位置しない ◎ The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.
7. 所与の浮動~box %F, および［ %F に`先行する$ ある~boxを包含している`行l~box$ %B ］に対し ⇒ %F の上端は %B の上端 より上に位置しない ◎ The outer top of an element’s floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.

8. 所与の左浮動~box %L に対し， %L の左端が，包含塊の左端に接していないならば† ⇒ %L の右端は，包含塊の右端より右に位置しない

   右浮動~boxについても相似的な規則が課されるとする。

   ◎ A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block’s right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.) An analogous rule holds for right-floating elements.
9. 【 `clear$p が設定された浮動体に対する `追加的な拘束＠#_rule-for-float-with-clear$。 】
10. 以上による制約の下で、 浮動~boxは アリな限り上方に配置する。 ◎ A floating box must be placed as high as possible.
11. 前項も含め，以上による制約の下で、［ 左浮動／右浮動 ］~boxは アリな限り［ 左方／右方 ］に配置する。 ◎ A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.

<div style="width: 10em; border:solid thin;">
  <div style="float:left; height:1em; outline:solid red;"
  ><!-- 左~浮動体１（横幅 0 ） --></div>
  <div style="float:left; width: 20em;"
  >左~浮動体２（横幅は包含塊のそれを超える）</div>
…
</div>

ただし，~CSS2においては、 次の様な浮動体 %F の位置は未定義である： ［ %F と同じ`塊~整形~文脈$に属する, `~flow内$にある負な縦方向~margin ］があって，［ そのような~marginすべてが 0 に設定された ］とするとき、 %F の位置がより上になる。 ◎ But in CSS 2, if, within the block formatting context, there is an in-flow negative vertical margin such that the float’s position is above the position it would be at were all such negative margins set to zero, the position of the float is undefined. ◎ ↑↑References to other elements in these rules refer only to other elements in the same block formatting context as the float.

<p>a<span style="float: right">b</span></p>

9.5.2. 浮動体の~~脇への~flowの制御-法： `clear^p ~prop

要素の`~clear対象$は、 `clear$p の値に応じて，次で与えられる： ◎ Values have the following meanings when applied to non-floating block-level boxes:

`left@v

要素に`先行する$すべての左浮動~box。 ◎ Requires that the top border edge of the box be below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document.

`right@v

要素に`先行する$すべての右浮動~box。 ◎ Requires that the top border edge of the box be below the bottom outer edge of any right-floating boxes that resulted from elements earlier in the source document.

`both@v

要素に`先行する$すべての浮動~box。 ◎ Requires that the top border edge of the box be below the bottom outer edge of any right-floating and left-floating boxes that resulted from elements earlier in the source document.

`none@v

空集合 （すなわち、 ~boxの位置には，以下に述べる拘束は適用されないことを意味する）。 ◎ No constraint on the box’s position with respect to floats.

【 この節の以下の記述は、 下の例の終わりまで，浮動体でない要素を対象にする。 】

`none$v 以外の値に対しては、 `~clearance@ が導入され得る。 ~clearanceは、 ~margin相殺を妨げつつ，要素の `margin-top$p の上方における間隔法として動作する。 それは、 浮動体の`側方$に重合しない所まで，要素を下方へ押出すために利用される。 ◎ Values other than none potentially introduce clearance. Clearance inhibits margin collapsing and acts as spacing above the margin-top of an element. It is used to push the element vertically past the float.

要素の `仮の位置^V とは、 要素が［ その `clear$p ~propが `none^v である下で配置されたとき ］の，上端~border辺として与えられる。 要素は、 その `仮の位置^V が，要素の`~clear対象$に含まれている いずれかの浮動体の`側方$にあるとき、 `~clearanceを持つ@ とされ、 `~clearance$が導入されることになる （必然的に、 要素の `clear$p の算出d値は，非 `none^v である必要がある）。 ◎ Computing the clearance of an element on which clear is set is done by first determining the hypothetical position of the element’s top border edge. This position is where the actual top border edge would have been if the element’s clear property had been none.

要素が`~clearanceを持つ$場合、 要素とその周りの要素による~margin相殺の挙動も， `§ ~marginの相殺-法$に則って変化し、 `~clearance$の量は，次のいずれかの挙動により設定される： ◎ If this hypothetical position of the element’s top border edge is not past the relevant floats, then clearance is introduced, and margins collapse according to the rules in 8.3.1.

• 挙動 A： `~clearance$を，次に挙げる 2 つの量の最~大に設定する： ◎ Then the amount of clearance is set to the greater of:

  1. 要素が生成する塊の上端~border辺を［ `~clear対象$の浮動体の下端~外縁~辺のうち，最も下方にある位置 ］に配置するために必要yな量。

     【 `~clearance$がこの量で与えられる場合、 塊の上端~marginは，塊の上端~位置に影響しなくなることになる。 】

     ◎ The amount necessary to place the border edge of the block even with the bottom outer edge of the lowest float that is to be cleared.

  2. 塊の上端~border辺を `仮の位置^V に配置するために必要yな量。

     【 `仮の位置^V は浮動体の`側方$にある筈なので，何のために この量も得る必要があるのか不思議に見えるが、 このことは，`~clearance$が導入される — すなわち，要素の上端~marginが他と相殺されなくなる — と同時に，その副作用として浮動体の上端~位置も変わり得ることを意味する（下の例を見よ）。 】

     ◎ The amount necessary to place the top border edge of the block at its hypothetical position.
• 挙動 B： `~clearance$を，単に挙動 A の最初の項で与えられる量に設定する。 ◎ Alternatively, clearance is set exactly to the amount necessary to place the border edge of the block even with the bottom outer edge of the lowest float that is to be cleared.

注記： いずれの挙動も、 既存の~Web内容との互換性に関する評価を待っているため，許容されている。 将来の~CSS仕様は、 このいずれか, または他の挙動を要求することになる。 ◎ Note: Both behaviors are allowed pending evaluation of their compatibility with existing Web content. A future CSS specification will require either one or the other.

注記： `~clearance$は 0 以下にもなり得る。 ◎ Note: The clearance can be negative or zero.

<div style="line-height:1.2em;">
  <div style="margin-bottom:4em; border:solid 0.4em pink;"
  >塊１</div>
  <div>
    <mark style="float:left;">（浮動体）</mark>
    <div style="margin-top:1em; border:solid 0.4em pink;"
    >塊２</div>
  </div>
</div>

<div style="line-height:1.2em;">
  <div style="margin-bottom:1em; border:solid 0.4em pink;"
  >塊１</div>
  <div>
    <mark style="float:left;">（浮動体）</mark>
    <div style="margin-top:4em; border:solid 0.4em pink;"
    >塊２</div>
  </div>
</div>

`clear^p ~propが浮動~要素に設定されたときは、 `浮動体の位置決め規則＠#float-rules$に次の拘束も追加される： ◎ When the property is set on floating elements, it results in a modification of the rules for positioning the float. An extra constraint (#10) is added:

• 所与の浮動体 %F に対し ⇒ %F の上端 `外縁~辺$は、 %F の`~clear対象$である，どの浮動体の下端 `外縁~辺$よりも上に位置しない ◎ The top outer edge of the float must be below the bottom outer edge of all earlier left-floating boxes (in the case of 'clear: left'), or all earlier right-floating boxes (in the case of 'clear: right'), or both ('clear: both').

注記： `clear$p ~propは、 `CSS1$r においては 【行内~levelも含め】 `すべての要素に適用される＠~TR/REC-CSS1#clear$ — したがって、 すべての要素~上でこの~propを~supportする実装もある。 ［ `CSS20$r ／~CSS2 ］においては、 `塊~levelの要素$のみに適用される。 したがって、 作者は，この~propを`塊~levelの要素$に限って利用するべきである。 `clear$p を`行内~levelの要素$ 上でも~supportする実装は、 上に説明した`~clearance$を設定するのでなく，分断を強制するべきである — 実質的には、 空な`行l~box$を一つ以上~挿入する （または、 `§ 9.5＠#floats$ にて述べたとおり，新たな`行l~box$を下方へズラす） ことにより、［ `~clearanceを持つ$ような行内~levelの要素を含んでいる`行l~box$ ］の上端を`~clear対象$の どの浮動~boxよりも下へ移動させる ］ことになる。 ◎ Note. This property applied to all elements in CSS1. Implementations may therefore have supported this property on all elements. In CSS2 (1998) and CSS 2 the clear property only applies to block-level elements. Therefore authors should only use this property on block-level elements. If an implementation does support clear on inline elements, rather than setting a clearance as explained above, the implementation should force a break and effectively insert one or more empty line boxes (or shifting the new line box downward as described in section 9.5) to move the top of the cleared inline’s line box to below the respective floating box(es).

9.9.1. 積層-~levelの指定-法： `z-index^p ~prop

`z-index$p ~propは、 要素が生成する`有位置$な~boxに対し，次を指定する： ◎ For a positioned box, the z-index property specifies:

• ~boxが属している`積層~文脈$における，~boxの`積層-~level$。 ◎ The stack level of the box in the current stacking context.
• ~boxは`積層~文脈$を確立するかどうか。 ◎ Whether the box establishes a stacking context.

各種~値の意味は： ◎ Values have the following meanings:

`integer$t

生成される~boxは、 新たな`積層~文脈$を確立する。 ~boxの`積層-~level$は，所与の整数になる。 ◎ This integer is the stack level of the generated box in the current stacking context. The box also establishes a new stacking context.

`auto@v

生成される~boxの`積層-~level$は， 0 になる。 ~boxは、 `根~要素$でない限り，新たな`積層~文脈$を確立しない†。 ◎ The stack level of the generated box in the current stacking context is 0. The box does not establish a new stacking context unless it is the root element.

【† この~propによる効果としては。 積層~文脈は、 他の要因により確立される場合もある。 】

この節の~~表記 “手前” 【！／ “奥” 】は、 利用者が面する~screenから，利用者に近づく方を意味する ◎ In this section, the expression "in front of" means closer to the user as the user faces the screen.

~CSS2においては、 各~boxは，［ 横方向, 縦方向 ］位置に加え， “z-軸” 方向（~screen面から垂直に利用者に近づく方向）の位置 — 略して z-位置 — も持つ。 z-位置は、 特に~boxどうしが視覚的に重合する場合に関わり， 整形する際の他の~boxによる層との重なり順を表す。 この節は、 各~boxが z-軸~沿いのどこに位置されるかについて論じる。 ◎ In CSS 2, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually. This section discusses how boxes may be positioned along the z-axis.

描画~treeが`~canvas$に塗られる順序は、 `積層~文脈$を通して述べられる。 `積層~文脈$は、 別の`積層~文脈$を包含し得る†。 `積層~文脈$は、 その親の`積層~文脈$の視点からは不可分である — それらの~boxたちの合間に，他の`積層~文脈$に属する~boxが来ることはない††。 ◎ The order in which the rendering tree is painted onto the canvas is described in terms of stacking contexts. Stacking contexts can contain further stacking contexts. A stacking context is atomic from the point of view of its parent stacking context; boxes in other stacking contexts may not come between any of its boxes.

【† すなわち、 各 積層~文脈は，`~box~tree$の中の ある下位treeを表現する。 】【†† すなわち、 親~積層~文脈の視点からは，不可分な一枚の層（＝末端の子孫）として扱われる。 】

`根~要素$は、 根`積層~文脈$【`積層~文脈$たちが成す~treeの根】を形成する。 他の`積層~文脈$は、 `有位置$な要素（`相対的に位置され$た要素も含む）のうち `z-index$p の算出d値が `auto$v 以外をとるものにより生成される。 `積層~文脈$は、 包含塊に関係するとは限らない。 将来~levelの~CSSでは、 他の~propからも`積層~文脈$が導入され得る — 例えば `opacity$p 。 【`課題 #2717＠~CSSissue/2717$ も見よ。】 ◎ The root element forms the root stacking context. Other stacking contexts are generated by any positioned element (including relatively positioned elements) having a computed value of z-index other than auto. Stacking contexts are not necessarily related to containing blocks. In future levels of CSS, other properties may introduce stacking contexts, for example opacity [CSS3COLOR].

各`積層~文脈$の中では、 次に挙げる各~層が，挙げられる順に, 奥から手前の順序で塗られる： ◎ Within each stacking context, the following layers are painted in back-to-front order:

1. `積層~文脈$を確立している要素の［ 背景と~border ］。 ◎ the background and borders of the element forming the stacking context.
2. 子`積層~文脈$のうち，`積層-~level$が負なもの（最も負なものが最初）。 ◎ the child stacking contexts with negative stack levels (most negative first).

3. `有位置$でない子孫たち — 次の順に塗られる： ◎ ↓

   1. `~flow内$にある, かつ `行内~level$でないもの。 ◎ the in-flow, non-inline-level, non-positioned descendants.
   2. `浮動体$。 （ A ） ◎ the non-positioned floats.
   3. `~flow内$にある, かつ `行内~level$であるもの。 （ B ） ◎ the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
4. ［ 子`積層~文脈$／`有位置$な子孫 ］のうち，`積層-~level$が 0 のもの。 （ C ） ◎ the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
5. 子`積層~文脈$のうち，`積層-~level$が正なもの（最も正なものが最後）。 ◎ the child stacking contexts with positive stack levels (least positive first).

この塗ng順序は、 各`積層~文脈$に対し，再帰的に適用される。 この，`積層~文脈$の塗ng順序の記述は、 `付録 E＠~CSS22/zindex.html#elaborate-stacking-contexts$ による詳細な規範的~定義の概観である。 ◎ This painting order is applied recursively to each stacking context. This description of stacking context painting order constitutes an overview of the detailed normative definition in Appendix E.

<div style="z-index:-1">
  <div style="position:fixed; z-index:1; ..."
  >固定的に位置された内容</div>
</div>

<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>z-位置の用例</title>
    <style type="text/css">
      .pile { 
        position: absolute; 
        left: 2in; 
        top: 2in; 
        width: 3in; 
        height: 3in; 
      }
    </style>
  </head>
  <body>
    <img id="image" class="pile" 
         src="butterfly.png" alt="見本~画像"
         style="z-index: 1"
    >

    <div id="text1" class="pile" 
         style="z-index: 3"
    >
      
この~textは、
見本~画像より手前の層に来る
◎
This text will overlay the butterfly image.

    </div>

    <div id="text2">
      
この~textは、
一番~奥の層に来る
◎
This text will be beneath everything.

    </div>

    <div id="text3" class="pile" 
         style="z-index: 2"
    >
      
この~textは、
text1 より奥, かつ見本~画像より手前の層に来る
◎
This text will underlay text1, but overlay the butterfly image

    </div>
  </body>
</html>

この例は、 透明度の観念をデモる。 背景に対する既定の挙動では、 背後にある~boxは可視にされる。 この例では、 各~boxは，下~層の~boxの上~層に透明に~~重ねられる。 この挙動は、 既存の各種 `背景~prop＠~CSS22/colors.html#background-properties$ のいずれかを利用して上書きできる。 ◎ This example demonstrates the notion of transparency. The default behavior of the background is to allow boxes behind it to be visible. In the example, each box transparently overlays the boxes below it. This behavior can be overridden by using one of the existing background properties.

10.3.X. 各種~boxに対する横幅の計算-法

【 この訳では、 各種~boxに対する横幅の計算-法を，この節の中で一括して与える。 】

1. 先ず，`置換d要素$に対しては、 不定な %W を `§ 置換d要素の~sizing$ に従って解決した上で、 以下を適用する。
2. `絶対的に位置され$た要素に対しては、 `§ 10.3.7$ に従うとする。

3. 他の要素に対しては：

   通常~flow内にある`行内~level$の要素 【！原文 § 10.3.1, § 10.3.2, § 10.3.9, § 10.3.10】

   `浮動体$ 【！原文 § 10.3.5, § 10.3.6】

   不定な %W は：

   • `行内~box$に対しては、 `width$p は適用されないので，計算されない。
   • 他（`行内-塊$, `浮動体$）に対しては、 `内容が収まる~size$† （ “ `shrink-to-fit^en（収まるよう縮短した）” ~size） に解決する。 【†ここでは、 `CSS-SIZING-3$r の用語を利用して，原文の記述を省略する。】 【！~layoutの目的においては、`内在的~size$が計算される。】

   不定な［ %mL ／ %mR ］は、 0 に解決する。

   通常~flow内にある`塊~level$の要素

   `§ 10.3.3$ にて与えられる。

10.3.1. 行内~boxを生成する要素

`§ 各種~boxに対する横幅の計算-法$ を見よ。 ◎ The width property does not apply. A computed value of auto for margin-left or margin-right becomes a used value of 0.

10.3.2. 行内~levelの置換d要素

`§ 各種~boxに対する横幅の計算-法$ を見よ。 ◎ A computed value of auto for margin-left or margin-right becomes a used value of 0. ◎ If height and width both have computed values of auto and the element also has an intrinsic width, then that intrinsic width is the used value of width. ◎ If height and width both have computed values of auto and the element has no intrinsic width, but does have an intrinsic height and intrinsic ratio; or if width has a computed value of auto, height has some other computed value, and the element does have an intrinsic ratio; then the used value of width is: • (used height) * (intrinsic ratio) ◎ If height and width both have computed values of auto and the element has an intrinsic ratio but no intrinsic height or width, then the used value of width is undefined in CSS 2. However, it is suggested that, if the containing block’s width does not itself depend on the replaced element’s width, then the used value of width is calculated from the constraint equation used for block-level, non-replaced elements in normal flow. ◎ Otherwise, if width has a computed value of auto, and the element has an intrinsic width, then that intrinsic width is the used value of width. ◎ Otherwise, if width has a computed value of auto, but none of the conditions above are met, then the used value of width becomes 300px. If 300px is too wide to fit the device, UAs should use the width of the largest rectangle that has a 2:1 ratio and fits the device instead.

10.3.3. 通常~flow内にある塊~levelの置換されない要素

%W は不定でない：

先ず，［ %W ~PLUS ( 不定でない %mL ) ~PLUS ( 不定でない %mR ) ~GT 包含塊の横幅 ~MINUS %pb ］ならば、 不定な［ %mL ／ %mR ］は 0 に解決する。 その上で， %mL, %mR に応じて： ◎ If width is not auto and border-left-width + padding-left + width + padding-right + border-right-width (plus any of margin-left or margin-right that are not auto) is larger than the width of the containing block, then any auto values for margin-left or margin-right are, for the following rules, treated as zero.

%mL, %mR ともに不定でない （この事例は “拘束され過ぎ” ）：

包含塊の `direction$p ~propに応じて：

• `ltr^v ならば： %mR を不定とみなして， %mR について等式を解いて解決する。
• `rtl^v ならば： %mL を不定とみなして， %mL について等式を解いて解決する。

◎ If all of the above have a computed value other than auto, the values are said to be "over-constrained" and one of the used values will have to be different from its computed value. If the direction property of the containing block has the value ltr, the specified value of margin-right is ignored and the value is calculated so as to make the equality true. If the value of direction is rtl, this happens to margin-left instead.

%mL, %mR の片方だけ不定：

その不定な片方について等式を解いて解決する。 ◎ If there is exactly one value specified as auto, its used value follows from the equality.

%mL, %mR ともに不定：

%mL, %mR について， %mL = %mR の下で等式を解いて解決する。 これは、 `包含塊$の左右の辺を基準に要素を横方向に中央寄せにする。 ◎ ↓↓

%W は不定：

不定な［ %mR ／ %mL ］は 0 に解決した上で、 %W について等式を解いて解決する。 ◎ If width is set to auto, any other auto values become 0 and width follows from the resulting equality. ◎ ↑↑If both margin-left and margin-right are auto, their used values are equal. This horizontally centers the element with respect to the edges of the containing block.

【 見通しを良くするため、 この節では，原文による場合分けを一部 組み替えている。 】

10.3.4. 通常~flow内にある塊~levelの置換d要素

`§ 各種~boxに対する横幅の計算-法$, および `§ 10.3.3$ を見よ。 ◎ The used value of width is determined as for inline replaced elements. Then the rules for non-replaced block-level elements are applied to determine the margins.

10.3.5. 浮動している置換されない要素

`§ 各種~boxに対する横幅の計算-法$ を見よ。 ◎ If margin-left, or margin-right are computed as auto, their used value is 0. ◎ If width is computed as auto, the used value is the "shrink-to-fit" width. ◎ Calculation of the shrink-to-fit width is similar to calculating the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. CSS 2 does not define the exact algorithm. Thirdly, find the available width: in this case, this is the width of the containing block minus the used values of margin-left, border-left-width, padding-left, padding-right, border-right-width, margin-right, and the widths of any relevant scroll bars. ◎ Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).

10.3.6. 浮動している置換d要素

`§ 各種~boxに対する横幅の計算-法$ を見よ。 ◎ If margin-left or margin-right are computed as auto, their used value is 0. The used value of width is determined as for inline replaced elements.

10.3.7. 絶対的に位置された置換されない要素

【 この節の内容は、 `CSS-POSITION-3$r の`対応する節＠~CSSPOS#abs-non-replaced-width$ に移譲。 】

10.3.8. 絶対的に位置された置換d要素

【 この節の内容は、 `CSS-POSITION-3$r の`対応する節＠~CSSPOS#abs-replaced-width$ に移譲。 】

10.3.9. 通常~flow内にある置換されない行内-塊~要素

`§ 各種~boxに対する横幅の計算-法$ を見よ。 ◎ If width is auto, the used value is the shrink-to-fit width as for floating elements. ◎ A computed value of auto for margin-left or margin-right becomes a used value of 0.

10.3.10. 通常~flow内にある行内-塊~置換d要素

`§ 各種~boxに対する横幅の計算-法$ を見よ。 ◎ Exactly as inline replaced elements.

縦横比を伴う~size不定の置換d要素に対する最大, 最小~sizeの適用-法

生来な縦横比を伴う置換d要素のうち［ `width$p, `height$p ］とも `auto^v が指定されているものに対しては、［ `min-*^p, `max-*^p ］~propは，要素の［ `width$p, `height$p ］の使用~値に次に従うように影響する：

1. まず、 利用される値を定義する：

   • ( %W, %H ) ~LET `§ 置換d要素の~sizing$ に従って得られる “仮の” ( 横幅, 縦幅 )
   • %nA ~LET %W ~DIV %H（ = 生来な縦横比）
   • %minW ~LET `min-width$p の算出d値
   • %maxW ~LET max( %minW, `max-width$p の算出d値 ) †
   • %minH ~LET `min-height$p の算出d値
   • %maxH ~LET max( %minH, `max-height$p の算出d値 ) †

   † `max-*^p に対する値が `none^v の場合、 無限大になる。

   %W ／ %H は、 ~~通常は，生来な［ 横幅／縦幅 ］になるが、 生来な縦横比のみを伴う場合には，そうなるとは限らない。

   結果の使用~値は、 次の式で与えられる：

   • 横幅（ `width$p ） = max(%X, %minW)
   • 縦幅（ `height$p ） = max(%X ~DIV %nA, %minH)
   • %X = min( %maxW, %maxH ~MUL %nA, max( %W, %minW, %minH ~MUL %nA ) )

   【 この式は、 原文の多岐にわたる場合分けを場合分けなしに集約したものである。 概念的には、 元の矩形を， (1) 先ず，~size %minW × %minH の矩形を包含するように，必要なら — 縦横比を保ちながら — 拡大して、 (2) 次に，~size %maxW × %maxH の矩形に収まるように，必要なら — 縦横比を保ちながら — 縮小して、 (3) 最後に，~size %minW × %minH の矩形を包含するように，必要なら（縦横比は無視して）横幅, 縦幅を個別に増やして得られる矩形になる。 】

   ◎ Select from the table the resolved height and width values for the appropriate constraint violation. Take the max-width and max-height as max(min, max) so that min ≤ max holds true. In this table w and h stand for the results of the width and height computations ignoring the min-width, min-height, max-width and max-height properties. Normally these are the intrinsic width and height, but they may not be in the case of replaced elements with intrinsic ratios.

   注記： `width$p, `height$p のうち片方には非 `auto^v, もう片方には `auto^v が指定されている場合、 `auto^v にされた方に対し［ `min-*^p ／ `max-*^p ］による~sizeの拘束を適用したときに，拘束され過ぎになり得る。 この仕様は、 挙動において明瞭であるが，作者の期待には沿わないかもしれない。 異なる結果を得したいときは、 ~CSS3 `object-fit$p ~propを利用できる。 ◎ Note: In cases where an explicit width or height is set and the other dimension is auto, applying a minimum or maximum constraint on the auto side can cause an over-constrained situation. The spec is clear in the behavior but it might not be what the author expects. The CSS3 object-fit property can be used to obtain different results in this situation.

2. ［ `width$p ／ `height$p ］に対する この新たな使用~値を算出d値とみなす下で，［ `§ 横幅と~marginの計算-法$ ／ `§ 縦幅と~marginの計算-法$ ］を適用して、 不定な~marginを解決する。 ◎ Then apply the rules under "Calculating widths and margins" above, as if width were computed as this value.

10.6.X. 各種~boxに対する縦幅の計算-法

【 この訳では、 各種~boxに対する縦幅の計算-法を，この節の中で一括して与える。 】

1. 先ず，`置換d要素$に対しては、 不定な %H を `§ 置換d要素の~sizing$ に従って解決した上で、 以下を適用する。
2. `絶対的に位置され$た要素に対しては、 `§ 10.6.4$ にて与えられる。

3. 他の要素に対しては：

   1. 不定な［ %mT ／ %mB ］は ⇒＃ `行内~box$に対しては、縦方向~marginは適用されないので計算されない ／ 他の要素に対しては、 0 に解決する

   2. 不定な %H については、 次の状況を判別する必要がある （置換d要素については最初の段で解決-済みなので、 この段は関わらない）：

      新たな`塊~整形~文脈$を確立する要素

      `§ 塊~整形~文脈の根に対する自動~縦幅$ にて与えられる。 次に挙げるもの（のうち，他の整形~文脈を確立しないもの）が該当する：

      • 通常~flow内にある`塊~level$の要素であって `overflow$p の算出d値が `visible$v でないもの — (A) ただし、 `overflow$p ~prop値が`表示域に伝播され$ているものは除く。
      • `行内-塊$
      • `浮動体$

      行内~levelの要素に対しては、 それを包含する行l~boxの縦幅を計算するときには，要素の`~margin~box$が利用される。

      新たな整形~文脈を確立しない，行内~levelの要素（通常~flow内に`行内~box$を生成するもの）

      `§ 10.6.1$ にて与えられる。

      新たな整形~文脈を確立しない，塊~levelの要素

      `行内~整形~文脈$を確立する~boxを生成する，塊~levelの要素

      `§ 10.6.3$ にて与えられる — 上の (A) で~~除外されたものも，ここに含まれる。

      他の整形~文脈を確立する要素

      その整形~文脈の規則に従う — この文書では定義されない。 ~CSS2においては、 `~table~box$が該当する。

10.6.1. 行内~boxを生成する要素

`行内~box$に対しては `height$p は適用されないので、 不定な %H も計算されない。 `内容~区画$の縦幅は~fontに基づくべきであるが、 この仕様では，その方法は指定されない。 ~UAは、 例えば， ~em-boxや, ~fontの最大な ~ascender／~descender を利用してもヨイ （後者の場合、 ~em-boxの上下にはみ出る~glyphがあっても， `内容~区画$の中に~~収まることを確保するが、 ~boxの~sizeが~fontごとにまちまちになる。 前者の場合、 作者は `line-height$p に相対的な背景の~style付けを制御できるようになるが、 ~glyphの一部は，`内容~区画$の外に塗られるようになる。） ◎ The height property does not apply. The height of the content area should be based on the font, but this specification does not specify how. A UA may, e.g., use the em-box or the maximum ascender and descender of the font. (The latter would ensure that glyphs with parts above or below the em-box still fall within the content area, but leads to differently sized boxes for different fonts; the former would ensure authors can control background styling relative to the line-height, but leads to glyphs painting outside their content area.)

注記： ~CSS3では，おそらく、［ ~fontのどの~~計量を内容~縦幅に利用するか ］を選定するような~propが含められることになる。 ◎ Note: level 3 of CSS will probably include a property to select which measure of the font is used for the content height.

`行内~box$の縦方向の［ ~padding, ~border, ~margin ］は、 `内容~区画$の 上端／下端 から開始される — `line-height$p は、 行l~boxの縦幅を計算するときに利用されるだけで，それには関わらない。 ◎ The vertical padding, border and margin of an inline, non-replaced box start at the top and bottom of the content area, and has nothing to do with the line-height. But only the line-height is used when calculating the height of the line box.

複数の~fontが利用される場合 （利用される~glyphが，他と異なる~font内に見出されたときに起こる） の`内容~区画$の縦幅は、 この仕様では定義されない。 しかしながら，縦幅は、 `内容~区画$が，要素~内容に利用されるすべての~fontの［ ~em-box, または 最大な~ascenderと最大な~descenderの和 ］を収めるに十分な高さにすることが示唆される。 これは、 ~fontの`基底線$の整列に依存して，利用される どの~font~sizeよりも大きくなり得ることに注意。 ◎ If more than one font is used (this could happen when glyphs are found in different fonts), the height of the content area is not defined by this specification. However, we suggest that the height is chosen such that the content area is just high enough for either (1) the em-boxes, or (2) the maximum ascenders and descenders, of all the fonts in the element. Note that this may be larger than any of the font sizes involved, depending on the baseline alignment of the fonts.

10.6.2. 通常~flow内にある［行内~level／塊~level／行内-塊］置換d要素／浮動している置換d要素

`§ 各種~boxに対する縦幅の計算-法$ を見よ。 ◎ If margin-top, or margin-bottom are auto, their used value is 0. ◎ If height and width both have computed values of auto and the element also has an intrinsic height, then that intrinsic height is the used value of height. ◎ Otherwise, if height has a computed value of auto, and the element has an intrinsic ratio then the used value of height is: • (used width) / (intrinsic ratio) ◎ Otherwise, if height has a computed value of auto, and the element has an intrinsic height, then that intrinsic height is the used value of height. ◎ Otherwise, if height has a computed value of auto, but none of the conditions above are met, then the used value of height must be set to the height of the largest rectangle that has a 2:1 ratio, has a height not greater than 150px, and has a width not greater than the device width.

10.6.3. 通常~flow内にある塊~levelの置換されない要素

`§ 各種~boxに対する縦幅の計算-法$ （新たな整形~文脈を確立しない場合）も見よ。 ◎ This section also applies to block-level non-replaced elements in normal flow when overflow does not compute to visible but has been propagated to the viewport. ◎ If margin-top, or margin-bottom are auto, their used value is 0. If height is auto, the height depends on whether the element has any block-level children and whether it has padding or borders:

不定な %H は、［ 要素が`塊~level$の子を持つかどうか, および ~paddingまたは~borderを持つかどうか ］に依存して、［ 要素が生成する~box %box の`内容~区画$の上端~辺 ］から［ 次のうち最初に該当するもの ］までの距離に解決する： ◎ The element’s height is the distance from its top content edge to the first applicable of the following:

1. %box は`行内~整形~文脈$を確立している 【すなわち、塊~levelの子を持たない】 , かつ 行l~boxを一つは含む場合 ⇒ 最後の行l~boxの下端~辺 ◎ the bottom edge of the last line box, if the box establishes a inline formatting context with one or more lines

2. %box の子に`~flow内$にあるものがある場合、 そのような子のうち最後のものを %E とするとき：

   1. %E の下端~margin %m と, %box の下端~marginとが`相殺され$ない場合 ⇒ %m の`~margin辺$（ %m は，場合によっては他と`相殺され$る）
   2. %box の上端~marginと下端~marginとが`相殺され$ない場合 ⇒ %E の下端`~border辺$
   ◎ the bottom edge of the bottom (possibly collapsed) margin of its last in-flow child, if the child’s bottom margin does not collapse with the element’s bottom margin ◎ the bottom border edge of the last in-flow child whose top margin doesn’t collapse with the element’s bottom margin
3. 上に該当するものが無い場合 ⇒ %H は 0 に解決する ◎ zero, otherwise

通常~flow内にある子のみが織り込まれる （すなわち，［ `浮動体$ ／`絶対的に位置され$た~box ］は無視され、 `相対的に位置され$た~boxは，~offsetされていないと見なす）。 子~boxは`匿名~塊~box$の場合もあることに注意。 ◎ Only children in the normal flow are taken into account (i.e., floating boxes and absolutely positioned boxes are ignored, and relatively positioned boxes are considered without their offset). Note that the child box may be an anonymous block box.

10.6.4. 絶対的に位置された置換されない要素

【 この節の内容は、 `CSS-POSITION-3$r の`対応する節＠~CSSPOS#abs-non-replaced-height$ に移譲。 】

10.6.5. 絶対的に位置された置換d要素

【 この節の内容は、 `CSS-POSITION-3$r の`対応する節＠~CSSPOS#abs-replaced-height$ に移譲。 】

10.6.6. 複雑な事例

`§ 各種~boxに対する縦幅の計算-法$ （新たな整形~文脈を確立する場合）を見よ。 ◎ This section applies to: ◎ Block-level, non-replaced elements in normal flow when overflow does not compute to visible (except if the overflow property’s value has been propagated to the viewport). ◎ inline-block, non-replaced elements. ◎ Floating, non-replaced elements. ◎ If margin-top, or margin-bottom are auto, their used value is 0. If height is auto, the height depends on the element’s descendants per 10.6.7. ◎ For inline-block elements, the margin box is used when calculating the height of the line box.

10.6.7. 塊~整形~文脈の根に対する `auto^v 縦幅

`塊~整形~文脈$を確立する要素に対する不定な %H は、 以下に従って解決される： ◎ In certain cases (see, e.g., sections 10.6.4 and 10.6.6 above), the height of an element that establishes a block formatting context is computed as follows:

要素は`行内~level$の子のみを持つ場合【すなわち，塊~levelの子を持たない】 ◎ If it only has inline-level children,＼

縦幅は、［ 最も上端にある行l~boxの上端から, 最も下端にある行l~boxの下端まで ］の距離 ◎ the height is the distance between the top of the topmost line box and the bottom of the bottommost line box.

要素は`塊~level$の子を持つ場合 【すなわち，行内~levelの子は匿名な塊~levelの~boxで包装される】 ◎ If it has block-level children,＼

縦幅は、 塊~levelの子~boxの`~margin辺$のうち［ 最も上端にある上端~margin辺から, 最も下端にある下端~margin辺まで ］の距離 ◎ the height is the distance between the top margin-edge of the topmost block-level child box and the bottom margin-edge of the bottommost block-level child box.

`絶対的に位置され$た子は 無視され、 `相対的に位置され$た~boxは ~offsetなしと見なされる。 `匿名~塊~box$になる子~boxもあることに注意。 ◎ Absolutely positioned children are ignored, and relatively positioned boxes are considered without their offset. Note that the child box may be an anonymous block box.

10.8.1. 行間と半~行間

~UAは、 `行内~box$内の~glyphたちを， それらに関連な`基底線$により互いに整列するモノトスル。 しかる後、 各~glyphに対し， %A, %D を決定する。 同じ要素にて，異なる~fontの~glyphが利用されることもあるので、 すべての~glyphが同じ %A, %D になるとは限らないことに注意。 行内~boxが~glyphを一つも包含しない場合、 要素にて`可用な最初の~font$の %A, %D を伴うような， `支柱$（横幅 0 の不可視な~glyph）を包含するものと見なされる。 ◎ User agent must align the glyphs in a non-replaced inline box to each other by their relevant baselines. Then, for each glyph, determine the A and D. Note that glyphs in a single element may come from different fonts and thus need not all have the same A and D. If the inline box contains no glyphs at all, it is considered to contain a strut (an invisible glyph of zero width) with the A and D of the element’s first available font.

各~glyphに対し、 加えられる “行間” ［ %L = `line-height$p ~MINUS ( %A ~PLUS %D ) ］が決定される。 %L の半分は %A の上側に，もう半分は %D の下側に加えられ、 `基底線$の~glyphとその行間による［ 総~高さ `A'^V = %A ~PLUS %L ~DIV 2 ／ 総~深さ `D'^V = %D ~PLUS %L ~DIV 2 ］を与える。 ◎ Still for each glyph, determine the leading L to add, where L = line-height - AD. Half the leading is added above A and the other half below D, giving the glyph and its leading a total height above the baseline of A' = A + L/2 and a total depth of D' = D + L/2.

注記： %L は負にもなり得る。 ◎ Note. L may be negative.

行内~boxの縦幅は，［ すべての~glyph, それらの上下~各~側の半~行間を囲い込む ］ので、 正確に `line-height$p に等しくなる。 子~要素の~boxは、 この縦幅には波及しない。 ◎ The height of the inline box encloses all glyphs and their half-leading on each side and is thus exactly line-height. Boxes of child elements do not influence this height.

置換されない要素の［ ~margin ／ ~border ／ ~padding ］は、 行l~box計算には~~関与しないが，依然として，行内~boxの周囲に描画される。 ゆえに、［ `line-height$p により指定された縦幅 ］が［ 要素に包含される~boxの内容~縦幅 ］より小さい場合には、［ ~padding／~border ］の背景と色が，連接している行l~boxの中まで “拡幅-” され得ることになる。 ~UAは、 各~boxを文書~順序で描画するべきである。 したがって、 後続な行lの~borderは，先行する行lの~borderや~textの上に塗られることになる。 ◎ Although margins, borders, and padding of non-replaced elements do not enter into the line box calculation, they are still rendered around inline boxes. This means that if the height specified by line-height is less than the content height of contained boxes, backgrounds and colors of padding and borders may "bleed" into adjoining line boxes. User agents should render the boxes in document order. This will cause the borders on subsequent lines to paint over the borders and text of previous lines.

注記： ~CSS2は、 何が行内~boxの`内容~区画$とされるかについては定義しない （ `§ 10.6.1$ を見よ）。 したがって、 背景や~borderが描かれる所は，~UAにより異なることもある。 ◎ Note. CSS 2 does not define what the content area of an inline box is (see 10.6.1 above) and thus different UAs may draw the backgrounds and borders in different places.

注記： OpenType／TrueType ~fontを利用する実装は、 %A, %D に対し， （現在の要素の~font~sizeに拡縮した後の）［ ~fontの OS/2 ~tableによる計量 “sTypoAscender”, “sTypoDescender” ］を利用することが推奨される。 これらの計量が無い下では、［ HHEA ~tableによる計量 “Ascent”, “Descent” ］が利用されるべきである。 ◎ Note. It is recommended that implementations that use OpenType or TrueType fonts use the metrics "sTypoAscender" and "sTypoDescender" from the font’s OS/2 table for A and D (after scaling to the current element’s font size). In the absence of these metrics, the "Ascent" and "Descent" metrics from the HHEA table should be used.

10.8.2. `line-height^p ~prop

~fontの`基底線$の上下側の［ 高さ, 深さ ］は、 ~font内に包含されている計量と見做される （詳細は、~CSS3に）。 ◎ The height and depth of the font above and below the baseline are assumed to be metrics that are contained in the font. (For more details, see CSS level 3.)

`行内~box$に対しては、 `line-height$p は，行高の計算に利用される縦幅を指定する。 ◎ On a non-replaced inline element, line-height specifies the height that is used in the calculation of the line box height.

この~propに対する各種 値の意味は： ◎ Values for this property have the following meanings:

`normal@v

~UAは、 使用~値を要素の~fontに基づく “適度な” 値に設定する。 値は `number$t と同じ意味を持つ。 `normal^v に推奨される使用~値は、 1.0 以上 1.2 以下である。 ◎ Tells user agents to set the used value to a "reasonable" value based on the font of the element. The value has the same meaning as <number>. We recommend a used value for normal between 1.0 to 1.2. The computed value is normal.

`length$t

指定された長さは、 行高の計算に利用される。 ◎ The specified length is used in the calculation of the line box height. Negative values are illegal.

`number$t

~propの使用~値は、 この数~値と要素の~font~sizeとの積になる。 ◎ The used value of the property is this number multiplied by the element’s font size. Negative values are illegal. The computed value is the same as the specified value.

`percentage$t

~propの`算出d値$は、 この百分率~値と要素の~font~sizeとの積になる。 ◎ The computed value of the property is this percentage multiplied by the element’s computed font size. Negative values are illegal.

`line-height$p に対する負な値は合法でない。

div {
  line-height: 1.2;    /* 実数（ `number^t ） */
  font-size: 10pt
}
div {
  line-height: 1.2em;  /* 長さ（ `length^t ） */
  font-size: 10pt
}
div {
  line-height: 120%;   /* 百分率（ `percentage^t ） */
  font-size: 10pt
}

要素が，複数の~fontで描画される~textを包含する場合、 ~UAは，［ `line-height$p 用の値 `normal$v ］を最大な~font~sizeに則って決定してもヨイ。 ◎ When an element contains text that is rendered in more than one font, user agents may determine the normal line-height value according to the largest font size.

注記： 塊~容器~box内のすべての行内~boxにおいて［ （ `normal^v 以外の） `line-height$p 値は互いに同じ ］かつ［ 利用している最初に可用な~fontも互いに同じ ］（かつ，容器~内には 置換d要素, `行内-塊$, 等も無い）場合、 上述により， 連続する行lたちの互いの`基底線$は正確に `line-height$p ずつ離れるようになる。 これは、 例えば~tableなど，~colたちを — それらの内容~textに，~colごとに異なる~fontが利用されるときでも — 互いに整列させる必要があるときに，重要になる。 ◎ Note. When there is only one value of line-height (other than normal) for all inline boxes in a block container box and they all use the same first available font (and there are no replaced elements, inline-block elements, etc.), the above will ensure that baselines of successive lines are exactly line-height apart. This is important when columns of text in different fonts have to be aligned, for example in a table.

10.8.3. `vertical-align^p ~prop

この~propは、 行内~levelの要素により生成される~boxに対する，［ 行l~boxの内側における縦方向の位置決め ］に影響する。 ◎ This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.

注記： この~propの値は、 ~tableの文脈では異なる意味になる。 詳細は、 `§ ~table縦幅の~algo＠~CSS2TABLE#height-layout$ に諮られたし。 ◎ Note. Values of this property have different meanings in the context of tables. Please consult the section on table height algorithms for details.

以下に定義される各種 値は、 親~行内~要素, および［ 親~塊~容器~要素の`支柱$ ］に関してのみ意味を持つ。 ◎ The following values only have meaning with respect to a parent inline element, or to the strut of a parent block container element.

以下の定義において，整列に利用される~boxは、 `行内~box$に対しては，縦幅が `line-height$p にされた （~boxの~glyphと各~側の半~行間を包含している）~boxであり、 他のすべての要素に対しては，その`~margin~box$である。 ◎ In the following definitions, for inline non-replaced elements, the box used for alignment is the box whose height is the line-height (containing the box’s glyphs and the half-leading on each side, see above). For all other elements, the box used for alignment is the margin box.

`baseline@v

~boxの`基底線$を，親~boxの基底線に整列する。 基底線を持たない~boxに対しては、 下端`~margin辺$を親の基底線に整列する。 ◎ Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent’s baseline.

`middle@v

~boxの縦方向の中点を，親~boxの`基底線$から親の`~x-height$の半分だけ上方の所に整列する。 ◎ Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

`sub@v

~boxの`基底線$を，親の~boxの下付文字に対する適正な位置まで下げる （この値は、 要素の~textの~font~sizeに効果を及ぼすことはない）。 ◎ Lower the baseline of the box to the proper position for subscripts of the parent’s box. (This value has no effect on the font size of the element’s text.)

`super@v

~boxの`基底線$を，親の~boxの上付文字に対する適正な位置まで上げる （この値は、 要素の~textの~font~sizeに効果を及ぼすことはない）。 ◎ Raise the baseline of the box to the proper position for superscripts of the parent’s box. (This value has no effect on the font size of the element’s text.)

`text-top@v

~boxの上端を，親の`内容~区画$の上端（`§ 10.6.1$ を見よ）に整列する。 ◎ Align the top of the box with the top of the parent’s content area (see 10.6.1).

`text-bottom@v

~boxの下端を，親の`内容~区画$の下端（`§ 10.6.1$ を見よ）に整列する。 ◎ Align the bottom of the box with the bottom of the parent’s content area (see 10.6.1).

`percentage$t

~boxを，この距離（ `line-height$p 値の百分率）だけ上げる（正な値）／下げる（負な値）。 値 `0%^v は `baseline$v と同じ意味になる。 ◎ Raise (positive value) or lower (negative value) the box by this distance (a percentage of the line-height value). The value 0% means the same as baseline.

`length$t

~boxを，この距離だけ上げる（正な値）／下げる（負な値）。 値 `0px^v は `baseline$v と同じ意味になる。 ◎ Raise (positive value) or lower (negative value) the box by this distance. The value 0cm means the same as baseline.

以下に定義される各種 値は、 要素を行l~boxに相対的に整列する。 要素の子は，要素に相対的に整列されることもあるので （したがって子孫も同様になる）、 これらの値は，`整列-済み下位tree$の限界域を利用する。 行内~要素の `整列-済み下位tree@ は、 その要素, および そのすべての子~行内~要素のうち［ `vertical-align$p の算出d値が `top$v ／ `bottom$v でない ］ものの`整列-済み下位tree$を包含する。 `整列-済み下位tree$の上端（下端）は、 その下位tree内の~boxのうち，最も高い上端（下端）である。 ◎ The following values align the element relative to the line box. Since the element may have children aligned relative to it (which in turn may have descendants aligned relative to them), these values use the bounds of the aligned subtree. The aligned subtree of an inline element contains that element and the aligned subtrees of all children inline elements whose computed vertical-align value is not top or bottom. The top of the aligned subtree is the highest of the tops of the boxes in the subtree, and the bottom is analogous.

`top@v

`整列-済み下位tree$の上端を，行l~boxの上端に整列する。 ◎ Align the top of the aligned subtree with the top of the line box.

`bottom@v

`整列-済み下位tree$の下端を，行l~boxの下端に整列する。 ◎ Align the bottom of the aligned subtree with the bottom of the line box.

`inline-table^v の`基底線$は、 ~tableの最初の~rowの基底線とする。 ◎ The baseline of an inline-table is the baseline of the first row of the table.

`行内-塊$ %B の`基底線$は、［ %B の `overflow$p ~propの算出d値 ~EQ `visible^v ］かつ［ %B 内に`~flow内$にある行l~boxはある ］ならば，それらの行l~boxのうち最後のものの`基底線$とする。 他の場合は %B の下端~margin辺とする。 ◎ The baseline of an inline-block is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its overflow property has a computed value other than visible, in which case the baseline is the bottom margin edge.