CSS 2.2 — 10. 視覚整形モデルの詳細

Visual formatting model details

10.1. “包含塊” の定義

要素の~box（たち）の位置と~sizeは、しばしば，要素の `包含塊@ （ containing block ）と呼ばれる，ある矩形に相対的に計算される。 要素の包含塊は、以下に従って定義される： ◎ The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows:

  1. `根~要素$の包含塊は、 `初期~包含塊@ と呼ばれる矩形になる。 それは、連続的な媒体に対しては，［ `表示域$の寸法と同じ, かつ その原点が~canvasの原点に一致する ］ような矩形であり、頁媒体に対しては，`頁~区画$になる。 初期~包含塊の `direction$p ~propは、根~要素に対するそれと同じになる。 ◎ The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin; it is the page area for paged media. The 'direction' property of the initial containing block is the same as for the root element.

  2. 他の要素に対しては、その `position$p に応じて：

    `relative^v
    `static^v
    包含塊は、最も近い［ `塊~容器$である先祖~box ］の`内容~辺$で形成される。 ◎ For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block container ancestor box.
    `fixed^v
    連続的な媒体の下では，`表示域$／ 頁媒体の下では，`頁~区画$。 ◎ If the element has 'position: fixed', the containing block is established by the viewport in the case of continuous media or the page area in the case of paged media.
    `absolute^v

    要素の最も近い非 `static^v （ `absolute^v ／ `relative^v ／ `fixed^v ）先祖により，以下の様に確立される： ◎ If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way:

    先祖が`行内$である場合
    先祖により生成される［ 最初, 最後 ］の行内~boxの`~padding~box$を囲う最小の~boxにより形成される。 ~CSS_2においては、複数~行lに分割される`行内$要素に対する包含塊は，定義されない。 ◎ In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2, if the inline element is split across multiple lines, the containing block is undefined.
    先祖が他のものである場合
    先祖の`~padding辺$により形成される。 ◎ Otherwise, the containing block is formed by the padding edge of the ancestor.
    そのような先祖が無い場合
    `初期~包含塊$。 ◎ If there is no such ancestor, the containing block is the initial containing block.

頁媒体においては、`絶対位置され$た要素は，（文書が連続的であったかのように）頁~分断を無視して，その包含塊に相対的に位置される。 頁~区画からはみ出た要素の内容は、何~頁かにわたって分断され得る。 ◎ In paged media, an absolutely positioned element is positioned relative to its containing block ignoring any page breaks (as if the document were continuous). The element may subsequently be broken over several pages.

次に挙げる位置に解決されるような，`絶対位置され$た内容に対しては ⇒＃ ~lay-outされている頁（現在の頁）以外の頁~上／ 現在の頁~上の，印刷するために すでに描画された位置 ◎ For absolutely positioned content that resolves to a position on a page other than the page being laid out (the current page), or resolves to a position on the current page which has already been rendered for printing,＼

内容を次のいずれかの所に置いて~MAY ⇒＃ 現在の頁~上のどこか／ 後続の頁~上／ まるごと省略する ◎ printers may place the content • on another location on the current page, • on a subsequent page, or • may omit it.

注記： 何~頁かにわたって分割される`塊level$の要素は、各~頁~上にて異なる横幅になり得るので，機器~特有の制限があり得る。 ◎ Note that a block-level element that is split over several pages may have a different width on each page and that there may be device-specific limits.

位置決めが無ければ、次の文書における各~要素の包含塊は： ◎ With no positioning, the containing blocks (C.B.) in the following document: 

<!DOCTYPE html>
<html>
    <head>
        <title>包含塊の説明</title>
    </head>
    <body id="body">
        <div id="div1">
        <p id="p1">最初の段落の~text...</p>
        <p id="p2">これは、<em id="em1">
        <strong id="strong1">二番目の</strong>段落の中の~text</em></p>
        </div>
    </body>
</html>

次の様に確立される： ◎ are established as follows:

~boxを生成する要素 ◎ For box generated by 要素の包含塊を確立するもの ◎ C.B. is established by
`html^e 初期~包含塊 ◎ initial C.B. (UA-dependent)
`body^s `html^e
`div1^s `body^s
`p1^s `div1^s
`p2^s `div1^s
`em1^s `p2^s
`strong1^s `p2^s

初期~包含塊は、~UAに依存する。

`div1^s を次の様に`有位置に$した場合： ◎ If we position "div1": 

#div1 { position: absolute; left: 50px; top: 50px }

その包含塊は、最早 "body" でなくなり，`初期~包含塊$になる（他に有位置な先祖~boxは無いので）。 ◎ its containing block is no longer "body"; it becomes the initial containing block (since there are no other positioned ancestor boxes).

同様に， `em1^s も次の様に`有位置に$した場合： ◎ If we position "em1" as well: 

#div1 { position: absolute; left: 50px; top: 50px }
#em1  { position: absolute; left: 100px; top: 100px }

包含塊の表は、次の様になる： ◎ the table of containing blocks becomes:

~boxを生成する要素 ◎ For box generated by 要素の包含塊を確立するもの ◎ C.B. is established by
`html^e 初期~包含塊◎ initial C.B.
`body^s `html^e
`div1^s 初期~包含塊◎ initial C.B.
`p1^s `div1^s
`p2^s `div1^s
`em1^s `div1^s
`strong1^s `em1^s

`有位置$な `em1^s の包含塊は、最も近い有位置な先祖~box — すなわち， `div1^s が生成する~box — になる。 ◎ By positioning "em1", its containing block becomes the nearest positioned ancestor box (i.e., that generated by "div1").

10.2. 内容~横幅： `width^p ~prop

◎名 `width@p ◎値 `length$t | `percentage$t | `auto^v ◎初 `auto^v ◎適 すべての要素 — ただし，非置換~行内~要素, `table-row^v, `table-row-group^v は除く。 ◎ all elements but non-replaced inline elements, table rows, and row groups ◎継 されない ◎百 包含塊の横幅を基準にする。 ◎ refer to width of containing block ◎媒 視覚的 ◎算 指定値 — ただし、 `length$t 値は絶対~長さに解決される ◎ the percentage or 'auto' as specified or the absolute length ◎表終

この~propは、~boxの`内容~横幅$を指定する。 ◎ This property specifies the content width of boxes.

この~propは、非置換`行内$ 要素には適用されない。 そのような要素が生成する~boxの内容~横幅は、その中に`描画される内容$のそれになる（子が相対的に~offsetされる前の）。 行内~boxは、`行l~box$の中へ~flowする。 行l~boxの横幅は、その`包含塊$のそれになるが，`浮動体$が在る場合は短くされることもある。 ◎ This property does not apply to non-replaced inline elements. The content width of a non-replaced inline element's boxes is that of the rendered content within them (before any relative offset of children). Recall that inline boxes flow into line boxes. The width of line boxes is given by the their containing block, but may be shorted by the presence of floats.

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

`length$t
単位~付きの長さを利用して`内容~区画$の横幅を指定する。 ◎ Specifies the width of the content area using a length unit.
`percentage$t
百分率による横幅を指定する。 百分率は、生成される~boxの`包含塊$の横幅を基準に計算される。 包含塊の横幅が 要素の横幅に依存する場合の 結果の~layoutは、~CSS_2においては定義されない。 ◎ Specifies a percentage width. The percentage is calculated with respect to the width of the generated box's containing block. If the containing block's width depends on this element's width, then the resulting layout is undefined in CSS 2.＼
注記： 包含塊が塊~容器~要素に基づくような`絶対位置され$た要素に対しては、百分率は，その要素の`~padding~box$の横幅を基準に計算される。 これは、百分率による横幅が 常に親~要素の`内容~box$を基準に計算されていた CSS1 からの変更である。 ◎ Note: For absolutely positioned elements whose containing block is based on a block container element, the percentage is calculated with respect to the width of the padding box of that element. This is a change from CSS1, where the percentage width was always calculated with respect to the content box of the parent element.
`auto^v
横幅は、他の~propの値に依存する。 以下の各~節を見よ。 ◎ The width depends on the values of other properties. See the sections below.

`width$p に対する負の値は合法でない。 ◎ Negative values for 'width' are illegal.

例えば、次の規則は，段落の内容~横幅を 100 ~pixelに固定する： ◎ For example, the following rule fixes the content width of paragraphs at 100 pixels: 

p { width: 100px }

10.3. 横幅と~marginの計算-法

~layoutに利用される要素の［ `width$p, `margin-left$p, `margin-right$p, `left$p, `right$p ］~propの値は、互いに依存し，生成される~boxの種別にも依存する（~layoutに利用される値は、`使用値$とも呼ばれる）。 原則的には、使用値は，算出値の［ `auto^v を何らかの相応しい値に置換し，百分率~値は 包含塊に基づいて計算した ］結果と同じになるが、例外もある。 ◎ The values of an element's 'width', 'margin-left', 'margin-right', 'left' and 'right' properties as used for layout depend on the type of box generated and on each other. (The value used for layout is sometimes referred to as the used value.) In principle, the values used are the same as the computed values, with 'auto' replaced by some suitable value, and percentages calculated based on the containing block, but there are exceptions. The following situations need to be distinguished: ◎ inline, non-replaced elements ◎ inline, replaced elements ◎ block-level, non-replaced elements in normal flow ◎ block-level, replaced elements in normal flow ◎ floating, non-replaced elements ◎ floating, replaced elements ◎ absolutely positioned, non-replaced elements ◎ absolutely positioned, replaced elements ◎ 'inline-block', non-replaced elements in normal flow ◎ 'inline-block', replaced elements in normal flow ◎ For Points 1-6 and 9-10, the values of 'left' and 'right' in the case of relatively positioned elements are determined by the rules in section 9.4.3.

注記： 以下に計算される `width$p の使用値は、仮の値であり， `min-width$p, `max-width$p に依存して，複数回 計算する必要が生じることもある。 `最小, 最大の横幅$ 節を見よ。 ◎ Note. The used value of 'width' calculated below is a tentative value, and may have to be calculated multiple times, depending on 'min-width' and 'max-width', see the section Minimum and maximum widths below.

以下の各~節では、関連する各種~propの値を次の記号で表す：

これらの値は、初期時には，各~propの算出値に設定されているとする。 この節の目的は、これらのうち， 不定な 値 `auto^v をとるものを（拘束過多の場合も取り扱いつつ） 解決して 使用値を得ることである。

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

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

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

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

    • %W, %mL, %mR については：

      通常flow内にある`行内level$の要素
      `浮動体$

      不定な %W は：

      • `可分な行内$に対しては、 `width$p は適用されないので，計算されない。
      • 他（`行内-塊$, `浮動体$）に対しては、`内容収納~size$†（ “ `shrink-to-fit^en（最短収納）” ~size）に解決する。 【†ここでは、 CSS Sizing の用語を利用して、原文の記述を省略する。】
      不定な［ %mL ／ %mR ］は、 0 に解決する。
      通常flow内にある`塊level$の要素
      10.3.3 節 にて与えられる。

    • %L, %R については：

      • `相対位置され$た要素に対しては、~CSS_2 `9.4.3 節$ の規則により決定される。
      • 他の要素には適用されないので，計算されない。

10.3.1. 行内~非置換~要素（可分な行内levelの要素）

`各種~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. 行内~置換~要素

`各種~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の非置換 要素

結果の %mL, %W, %mR は、次の等式を満たすように解決され~MUST ⇒ %mL + %W + %mR = `包含塊$の横幅 − %pb

ここで %pb は、横方向の~padding幅, ~border幅の算出値の総和を表す（これらの~propは、 `auto^v 値をとらず，算出値は常に絶対~長さに解決される） ⇒ %pb = `border-left-width$p + `padding-left$p + `padding-right$p + `border-right-width$p

◎ The following constraints must hold among the used values of the other properties: ◎ 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
%W は不定でない：

先ず，［ %W + ( 不定でない %mL ) + ( 不定でない %mR ) ~GT 包含塊の横幅 − %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の置換~要素

`各種~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. 浮動している置換~要素

`各種~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.

静的位置

【 この節の内容は、縦幅の計算にも利用されるので，次節からこの節に分離している。 】

要素の `静的位置@ とは、概ね，要素が通常flowに置かれたとするときの位置を指す。 より精確には： ◎ For the purposes of this section and the next, the term "static position" (of an element) refers, roughly, to the position an element would have had in the normal flow. More precisely:

  • 要素の `静的位置~用の包含塊@ は、仮に，［ 要素の `position$p の指定値が `static^v であって, `float^p の指定値が `none^v であった ］とするときの，要素の最初の~box — 以下， `仮の~box^V — の包含塊である（ `display^p, `position^p, `float^p の関係性 節の規則に因り、この仮の計算は，［ `display^p の算出~値を異なる値に見做した下で行う ］ことを要する場合もあることに注意）。 ◎ The static-position containing block is the containing block of a hypothetical box that would have been the first box of the element if its specified 'position' value had been 'static' and its specified 'float' had been 'none'. (Note that due to the rules in section 9.7 this hypothetical calculation might require also assuming a different computed value for 'display'.)
  • ［ `top$p ／ `right$p ／ `bottom$p ／ `left$p ］に対する静的位置は、`静的位置~用の包含塊$の［ 上端／右端／下端／左端 ］辺から， `仮の~box^V の［ 上端／右端／下端／左端 ］`~margin辺$までの~offsetである。 この値は、 `仮の~box^V が包含塊をはみ出すときは，はみ出した側において負になる。 ◎ The static position for 'left' is the distance from the left edge of the containing block to the left margin edge of a hypothetical box that would have been the first box of the element if its 'position' property had been 'static' and 'float' had been 'none'. The value is negative if the hypothetical box is to the left of the containing block. ◎ The static position for 'right' is the distance from the right edge of the containing block to the right margin edge of the same hypothetical box as above. The value is positive if the hypothetical box is to the left of the containing block's edge.

しかしながら，~UAは、 `仮の~box^V の寸法を実際に計算せずに，確からしい位置を推測してよい。 ◎ But rather than actually calculating the dimensions of that hypothetical box, user agents are free to make a guess at its probable position.

`静的位置$を計算する目的においては：

  • `固定位置され$た要素（ `position$p: `fixed^v ）の包含塊は、表示域の代わりに初期~包含塊であるものと見做されるべきである。
  • ~scroll可能~boxは、その原点に~scrollされているものと見做されるべきである。
◎ For the purposes of calculating the static position, the containing block of fixed positioned elements is the initial containing block instead of the viewport, and all scrollable boxes should be assumed to be scrolled to their origin.

10.3.7. 絶対位置にされた非置換 要素

結果の使用値は、次の等式を満たさ~MUST（ %pb は 10.3.3 節 のそれと同じ） ⇒ ( %L + %mL + %W + %mR + %R ) = ( `包含塊$の横幅 − %pb ) ◎ The constraint that determines the used values for these elements is: ◎ 'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block

この節における %D は、［ 要素の`静的位置~用の包含塊$を確立している要素 ］の `direction$p ~propの値（ ~IN { `ltr^v, `rtl^v } ）を表すとする。 ◎ ↓

%L, %R ともに不定でない：
%W は不定：
  1. 不定な［ %mL ／ %mR ］は 0 に解決する。
  2. %W について等式を解いて解決する。
◎ ↓↓
%W は不定でない：
%mL, %mR ともに不定：

%mL = %mR になるように等式を解いて解決する — ただし、結果の %mL = %mR が負になる場合、 %D に応じて：

  • `ltr^v ならば ⇒ %mL を 0 に解決して， %mR について等式を解いて解決する。
  • `rtl^v ならば ⇒ %mR を 0 に解決して， %mL について等式を解いて解決する。
%mL, %mR の片方だけ不定：
その片方について等式を解いて解決する。
%mL, %mR ともに不定でない：

拘束過多。 %D に応じて：

  • `ltr^v ならば ⇒ %R を不定と見なして， %R について等式を解いて解決する。
  • `rtl^v ならば ⇒ %L を不定と見なして， %L について等式を解いて解決する。
◎ ↓↓If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below. ◎ If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values, unless this would make them negative, in which case when direction of the containing block is 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and solve for 'margin-right' ('margin-left'). If one of 'margin-left' or 'margin-right' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
他の場合（ %L, %R いずれかは不定）：
  1. 不定な［ %mL ／ %mR ］は 0 に解決する。 ◎ Otherwise, set 'auto' values for 'margin-left' and 'margin-right' to 0, and pick the one of the following six rules that applies.
  2. 不定な %W は `内容収納~size$（ “ `shrink-to-fit^en（最短収納）” ~size ）に解決する。 【ここでは、 CSS Sizing の用語を利用して、原文の記述を省略する。】 ◎ ↓'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
  3. %L, %R ともに不定ならば、 %D に応じて，［ `ltr^v ならば %L ／ `rtl^v ならば %R ］を`静的位置$に解決する。 ◎ 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
  4. 残る不定な［ %L ／ %R ］について等式を解いて解決する。 ◎ 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right' ◎ 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left' ◎ ↑↑'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width' ◎ 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right' ◎ ↑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, calculate the available width: this is found by solving for 'width' after setting 'left' (in case 1) or 'right' (in case 3) to 0. ◎ ↑Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).

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

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

`各種~boxに対する横幅の計算$, および 10.3.7 節 を見よ。 ◎ In this case, section 10.3.7 applies up through and including the constraint equation, but the rest of section 10.3.7 is replaced by the following rules: ◎ The used value of 'width' is determined as for inline replaced elements. If 'margin-left' or 'margin-right' is specified as 'auto' its used value is determined by the rules below. ◎ If both 'left' and 'right' have the value 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'ltr', set 'left' to the static position; else if 'direction' is 'rtl', set 'right' to the static position. ◎ If 'left' or 'right' are 'auto', replace any 'auto' on 'margin-left' or 'margin-right' with '0'. ◎ If at this point both 'margin-left' and 'margin-right' are still 'auto', solve the equation under the extra constraint that the two margins must get equal values, unless this would make them negative, in which case when the direction of the containing block is 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and solve for 'margin-right' ('margin-left'). ◎ If at this point there is an 'auto' left, solve the equation for that value. ◎ If at this point the values are over-constrained, ignore the value for either 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.

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内にある行内-塊~置換~要素

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

10.X. 置換~要素の~sizing

【 この節は、原文の各所に散らばる類似する記述を集約して整理したものである。 】

`置換~要素$に対する不定な %W ／ %H （ `width$p ／ `height$p の算出値 `auto^v ）は，下の表に従って［ “結果の %W”／ “結果の %H” ］の列で与えられる値に解決される — ここで：

%W %H %iW %iH %iA 結果の %W 結果の %H
定 ？ 定 定 定 %W %W × %iA
定 ？ ？ ？ 定 %W %W × %iA
定 ？ ？ 定 ？ %W %iH
定 ？ 定 ？ ？ %W 150px
定 ？ ？ ？ ？ %W 150px
？ 定 定 定 定 %H ÷ %iA %H
？ 定 ？ ？ 定 %H ÷ %iA %H
？ 定 ？ 定 ？ 300px %H
？ 定 定 ？ ？ %iW %H
？ 定 ？ ？ ？ 300px %H
？ ？ 定 定 定 %iW %iH
？ ？ ？ ？ 定 %X %X × %iA
？ ？ ？ 定 ？ 300px %iH
？ ？ 定 ？ ？ %iW 150px
？ ？ ？ ？ ？ 300px 150px

【 いずれにせよ、内在的~縦横比が不定でないならば、それを保つことが趣旨にある（しかしながら， %W, %H ともに不定でない場合、この節は適用されず，内在的~縦横比も無視されることになる）。 】

ここで：

10.4. 最小, 最大の横幅： `min-width^p, `max-width^p

◎名 `min-width@p ◎値 `length$t | `percentage$t ◎初 `0^v ◎適 すべての要素 — ただし，非置換~行内~要素, `table-row^v, `table-row-group^v は除く。 ◎ all elements but non-replaced inline elements, table rows, and row groups ◎継 されない ◎百 包含塊の横幅を基準にする。 ◎ refer to width of containing block ◎媒 視覚的 ◎算 指定値 — ただし、 `length$t 値は絶対~長さに解決される ◎ the percentage as specified or the absolute length ◎表終 ◎名 `max-width@p ◎値 `length$t | `percentage$t | `none^v ◎初 `none^v ◎適 `min-width$p と同じ ◎継 同上 ◎百 同上 ◎媒 同上 ◎算 同上 ◎表終

これら二つの~propにより、作者は，内容~横幅をある範囲に拘束できるようになる。 各種~値の意味は： ◎ These two properties allow authors to constrain content widths to a certain range. Values have the following meanings:

`length$t
固定の 最小／最大 使用~横幅を指定する。 ◎ Specifies a fixed minimum or maximum used width.
`percentage$t
使用値を決定するための百分率を指定する。 百分率は、生成される~boxの`包含塊$の横幅を基準に計算される。 包含塊の横幅が負の場合、使用値は 0 になる。 包含塊の横幅が，要素の横幅に依存する場合の結果の~layoutは、~CSS_2においては定義されない。 ◎ Specifies a percentage for determining the used value. The percentage is calculated with respect to the width of the generated box's containing block. If the containing block's width is negative, the used value is zero. If the containing block's width depends on this element's width, then the resulting layout is undefined in CSS 2.
`none^v
（この値は `max-width$p のみとり得る。） ~boxの横幅を制限しない。 ◎ (Only on 'max-width') No limit on the width of the box.

`min-width$p ／ `max-width$p に対する負の値は、合法でない。 ◎ Negative values for 'min-width' and 'max-width' are illegal.

~CSS_2においては、［ `table^v, `inline-table^v, `table-cell^v, `table-column^v, `table-column-group^v ］に対しては， `min-width$p ／ `max-width$p の効果は定義されない。 ◎ In CSS 2, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.

この二つの~propが `width$p ~propの`使用値$にどう波及するかについては、次の~algoで述べられる： ◎ The following algorithm describes how the two properties influence the used value of the 'width' property:

  1. 先ず、`横幅と~marginの計算-法$に従って，仮の使用~横幅 %W を計算する。 ◎ The tentative used width is calculated (without 'min-width' and 'max-width') following the rules under "Calculating widths and margins" above.
  2. ［ %W ~GT `max-width$p の算出値 %maxW ］ならば、 `width$p の算出値に %maxW を利用する下で，再度 `横幅と~marginの計算-法$を適用する。 ◎ If the tentative used width is greater than 'max-width', the rules above are applied again, but this time using the computed value of 'max-width' as the computed value for 'width'.
  3. ［ 結果の横幅 %W ~LT `min-width$p の算出値 %minW ］ならば、 `width$p の算出値に %minW を利用する下で，再度 `横幅と~marginの計算-法$を適用する。 ◎ If the resulting width is smaller than 'min-width', the rules above are applied again, but this time using the value of 'min-width' as the computed value for 'width'.

注記： これらの手続きは、上の~propの本当の算出値には影響しない。 ◎ These steps do not affect the real computed values of the above properties.

ただし、 `width$p, `height$p いずれの算出値も `auto^v であって, 内在的~縦横比を伴うような置換~要素に対しては、以下に与えられる~algoで決定される： ◎ However, for replaced elements with an intrinsic ratio and both 'width' and 'height' specified as 'auto', the algorithm is as follows:

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

`width$p, `height$p の両者とも `auto^v が指定されていて, かつ 内在的~縦横比を持つ置換~要素に対しては、 `min-*^p, `max-*^p ~propは，要素の `width$p, `height$p の使用値に次の様に影響する：

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

    • ( %W, %H ) := `置換~要素の~sizing$に従って得られる “仮の” ( 横幅, 縦幅 )
    • %iA := %H ÷ %W（ = 内在的~縦横比）
    • %minW := `min-width$p の算出値
    • %maxW := max( %minW, `max-width$p の算出値 ) †
    • %minH := `min-height$p の算出値
    • %maxH := max( %minH, `max-height$p の算出値 ) †

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

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

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

    • 横幅（ `width$p ） = max(%X, %minW)
    • 縦幅（ `height$p ） = max(%X × %iA, %minH)
    • %X = min( %maxW, %maxH ÷ %iA, max( %W, %minW, %minH ÷ %iA ) )

    【 この式は、原文の多岐にわたる場合分けを場合分けなしに集約したものである。 概念的には、元の矩形を， (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 ］に対する この新たな使用値を算出値と見なした下で，［ `横幅と~marginの計算-法$ ／ `縦幅と~marginの計算-法$ ］を適用して、不定~marginを解決する。 ◎ Then apply the rules under "Calculating widths and margins" above, as if 'width' were computed as this value.

10.5. 内容の縦幅： `height^p ~prop

◎名 `height@p ◎値 `length$t | `percentage$t | `auto^v ◎初 `auto^v ◎適 すべての要素 — ただし、非置換~行内~要素, `table-column^v, `table-column-group^v は除く ◎ all elements but non-replaced inline elements, table columns, and column groups ◎継 されない ◎百 注釈文を見よ ◎媒 視覚的 ◎算 百分率または `auto^v （ `percentage^t 下の注釈文を見よ）／ 絶対~長さ ◎ the percentage or 'auto' (see prose under <percentage>) or the absolute length ◎表終

この~propは、~boxの`内容~縦幅$を指定する。 ◎ This property specifies the content height of boxes.

この~propは、非置換 `行内$ 要素には適用されない。 代わりに利用される規則については、非置換~行内~要素に対する 縦幅と~marginの計算-法 節を見よ。 ◎ This property does not apply to non-replaced inline elements. See the section on computing heights and margins for non-replaced inline elements for the rules used instead.

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

`length$t
長さ値を利用して`内容~区画$の縦幅を指定する。 ◎ Specifies the height of the content area using a length value.
`percentage$t
百分率による縦幅を指定する。 百分率は、生成される~boxの`包含塊$の縦幅を基準に計算される。 包含塊の縦幅が明示的に指定されていない（すなわち，内容~縦幅に依存する）, かつ 要素は`絶対位置され$てない場合、 `auto^v に算出される。 `根~要素$に対する百分率による縦幅は、`初期~包含塊$に相対的になる。 ◎ Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block.＼
注記： 包含塊が塊levelの要素に基づくような`絶対位置され$た要素に対しては、百分率は，その要素の`~padding~box$の縦幅を基準に計算される。 これは、百分率による縦幅が常に親~要素の`内容~box$を基準に計算されていた CSS1 からの変更である。 ◎ Note: For absolutely positioned elements whose containing block is based on a block-level element, the percentage is calculated with respect to the height of the padding box of that element. This is a change from CSS1, where the percentage was always calculated with respect to the content box of the parent element.
`auto^v
縦幅は、他の~propの値に依存する。 下の注釈文を見よ。 ◎ The height depends on the values of other properties. See the prose below.

注記： `絶対位置され$た要素の包含塊の縦幅は，要素~自身の~sizeから独立であり， そのような要素~上の百分率による縦幅は、常に解決できる。 しかしながら、文書~内の後に来る要素が処理されるまで，縦幅は既知にならないこともある。 ◎ Note that the height of the containing block of an absolutely positioned element is independent of the size of the element itself, and thus a percentage height on such an element can always be resolved. However, it may be that the height is not known until elements that come later in the document have been processed.

`height$p に対する負の値は、合法でない。 ◎ Negative values for 'height' are illegal.

例えば、次の規則は、段落の内容~縦幅を 100 ~pixelに設定する： ◎ For example, the following rule sets the content height of paragraphs to 100 pixels: 

p { height: 100px }

内容の縦幅が 100~pixel を超過するような段落は、 `overflow$p ~propに則って`~overflow$することになる。 ◎ Paragraphs of which the height of the contents exceeds 100 pixels will overflow according to the 'overflow' property.

10.6. 縦幅と~marginの計算-法

以下の各~節では、関連する各種~propの値を次の記号で表す：

これらの値は、初期時には，各~propの算出値に設定されているとする。 この節の目的は、これらのうち， 不定な 値 `auto^v をとるものを 解決して 使用値を得ることである（拘束過多の場合も取り扱いつつ）。 ◎ For calculating the values of 'top', 'margin-top', 'height', 'margin-bottom', and 'bottom' a distinction must be made between various kinds of boxes: ◎ inline, non-replaced elements ◎ inline, replaced elements ◎ block-level, non-replaced elements in normal flow ◎ block-level, replaced elements in normal flow ◎ floating, non-replaced elements ◎ floating, replaced elements ◎ absolutely positioned, non-replaced elements ◎ absolutely positioned, replaced elements ◎ 'inline-block', non-replaced elements in normal flow ◎ 'inline-block', replaced elements in normal flow ◎ For Points 1-6 and 9-10, the used values of 'top' and 'bottom' are determined by the rules in section 9.4.3.

注記： 以下の規則は、根~要素にも，他の要素と同じように適用される。 ◎ Note: these rules apply to the root element just as to any other element.

注記： 以下で計算される `height$p の使用値は仮の値であり、 `min-height$p, `max-height$p に依存して，複数回 計算する必要が生じることもある。 `最小, 最大の縦幅$ 節を見よ。 ◎ Note. The used value of 'height' calculated below is a tentative value, and may have to be calculated multiple times, depending on 'min-height' and 'max-height', see the section Minimum and maximum heights below.

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

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

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

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

    1. 不定な［ %mT ／ %mB ］は ⇒＃ `可分な行内$に対しては、縦方向~marginは適用されないので計算されない ／ 他の要素に対しては、 0 に解決する
    2. %T, %B は ⇒＃ `相対位置され$た要素に対しては、~CSS_2 `9.4.3 節$ の規則により決定される ／ 他の要素には適用されないので，計算されない

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

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

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

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

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

      新たな整形文脈を確立しない，行内levelの要素（通常flow内にある`可分な行内$~boxを生成するもの）
      10.6.1 節 にて与えられる。
      新たな整形文脈を確立しない，塊levelの要素
      `行内~整形文脈$を確立する~boxを生成する，塊levelの要素
      10.6.3 節 にて与えられる — 上の (A) で除外されたものも，ここに含まれる。
      他の整形文脈を確立する要素
      その整形文脈の規則に従う — この文書では定義されない。 ~CSS_2においては、`~table~box$が該当する。

10.6.1. 行内 非置換~要素（可分な行内levelの要素）

`height$p は適用されないので、不定な %H も計算されない。 `内容~区画$の縦幅は~fontに基づくべきであるが、この仕様では，その方法は指定されない。 ~UAは、例えば， ~em-boxや, ~fontの最大の ~ascender／~descender を利用してよい（後者の場合、~em-boxの上下にはみ出るような~glyphであっても，`内容~区画$の中に~~収まるようにするが、~fontによって，~boxの~sizeがまちまちになる。 前者の場合、作者は `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.)

注記： CSS ~level 3 では，おそらく、［ ~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／行内-塊］置換~要素／浮動している置換~要素

`各種~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

上に該当するものが無い場合： %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. 絶対位置にされた非置換 要素

結果の使用値は、次の等式を満たさ~MUST ⇒ ( %T + %mT + %H + %mB + %B ) = ( `包含塊$の縦幅 − %pb )

ここで、 %pb は縦方向の~padding幅と~border幅の算出値の総和を表す（これらの~propは、 `auto^v 値をとらず，算出値は常に絶対~長さに解決される） ⇒ %pb = `border-top-width$p + `padding-top$p + `padding-bottom$p + `border-bottom-width$p

◎ For the purposes of this section and the next, the term "static position" (of an element) refers, roughly, to the position an element would have had in the normal flow. More precisely, the static position for 'top' is the distance from the top edge of the containing block to the top margin edge of a hypothetical box that would have been the first box of the element if its specified 'position' value had been 'static' and its specified 'float' had been 'none' and its specified 'clear' had been 'none'. (Note that due to the rules in section 9.7 this might require also assuming a different computed value for 'display'.) The value is negative if the hypothetical box is above the containing block. ◎ But rather than actually calculating the dimensions of that hypothetical box, user agents are free to make a guess at its probable position. ◎ For the purposes of calculating the static position, the containing block of fixed positioned elements is the initial containing block instead of the viewport. ◎ For absolutely positioned elements, the used values of the vertical dimensions must satisfy this constraint: ◎ 'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
%T, %B ともに不定でない：
%H は不定：
  1. 不定な［ %mT ／ %mB ］は 0 に解決する。
  2. %H について等式を解いて解決する。
◎ ↓↓
%H は不定でない：
%mT, %mB ともに不定：
%mT = %mB になるように等式を解いて解決する。
%mT, %mB の片方だけ不定：
その片方について等式を解いて解決する。
%mT, %mB ともに不定でない：
拘束過多。 %B を不定と見なした下で %B について等式を解いて解決する。
◎ ↓↓If all three of 'top', 'height', and 'bottom' are auto, set 'top' to the static position and apply rule number three below. ◎ If none of the three are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values. If one of 'margin-top' or 'margin-bottom' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'bottom' and solve for that value.
他の場合：
  1. 不定な［ %mT ／ %mB ］は 0 に解決する。
  2. 不定な %H は`塊~整形文脈の根に対する自動~縦幅$にて得られる値に解決する。
  3. %T, %B ともに不定：
    %T を`静的位置$に解決して， %B について等式を解いて解決する。
    %T, %B の片方だけ不定：
    その片方について等式を解いて解決する。
◎ Otherwise, pick the one of the following six rules that applies. ◎ 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top' ◎ 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to the static position, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom' ◎ 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom' ◎ 'top' is 'auto', 'height' and 'bottom' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top' ◎ 'height' is 'auto', 'top' and 'bottom' are not 'auto', then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0 and solve for 'height' ◎ 'bottom' is 'auto', 'top' and 'height' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0 and solve for 'bottom'

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

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

`各種~boxに対する縦幅の計算$, および 10.6.4 節 を見よ。 ◎ This situation is similar to the previous one, except that the element has an intrinsic height. The sequence of substitutions is now: ◎ The used value of 'height' is determined as for inline replaced elements. If 'margin-top' or 'margin-bottom' is specified as 'auto' its used value is determined by the rules below. ◎ If both 'top' and 'bottom' have the value 'auto', replace 'top' with the element's static position. ◎ If 'bottom' is 'auto', replace any 'auto' on 'margin-top' or 'margin-bottom' with '0'. ◎ If at this point both 'margin-top' and 'margin-bottom' are still 'auto', solve the equation under the extra constraint that the two margins must get equal values. ◎ If at this point there is only one 'auto' left, solve the equation for that value. ◎ If at this point the values are over-constrained, ignore the value for 'bottom' and solve for that value.

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の子を持たない】
縦幅は、［ 最も上端にある行l~boxの上端から, 最も下端にある行l~boxの下端まで ］の距離 ◎ If it only has inline-level children, 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で包装される】
縦幅は、塊levelの子~boxの`~margin辺$のうち［ 最も上端にある上端~margin辺から, 最も下端にある下端~margin辺まで ］の距離 ◎ If it has block-level children, 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.

加えて、次のいずれも満たす要素の子孫がある場合、縦幅は，それらの`~margin辺$を含むように増大される：

  • `浮動体$である
  • 下端`~margin辺$は要素の下端`内容~辺$の下に来る
  • この`塊~整形文脈$に関与する

例えば、［ `絶対位置され$た子孫や他の`浮動体$ ］の内側にある`浮動体$は，織り込まれない。

◎ In addition, if the element has any floating descendants whose bottom margin edge is below the element's bottom content edge, then the height is increased to include those edges. Only floats that participate in this block formatting context are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.

10.7. 最小, 最大の縦幅： `min-height^p, `max-height^p

要素の縦幅をある範囲に拘束できると有用になることもある。 次の二つの~propがこの機能性を~~提供する： ◎ It is sometimes useful to constrain the height of elements to a certain range. Two properties offer this functionality:

◎名 `min-height@p ◎値 `length$t | `percentage$t ◎初 `0^v ◎適 すべての要素 — ただし、非置換~行内~要素, `table-column^v, `table-column-group^v は除く ◎ all elements but non-replaced inline elements, table columns, and column groups ◎継 されない ◎百 注釈文を見よ ◎媒 視覚的 ◎算 指定値 — ただし、 `length$t 値は絶対~長さに解決される ◎ the percentage as specified or the absolute length ◎表終 ◎名 `max-height@p ◎値 `length$t | `percentage$t | `none^v ◎初 `none^v ◎適 `min-height$p と同じ ◎継 同上 ◎百 同上 ◎媒 同上 ◎算 同上 ◎表終

これら二つの~propにより、作者は，~boxの縦幅をある範囲に拘束できるようになる。 各種~値の意味は： ◎ These two properties allow authors to constrain box heights to a certain range. Values have the following meanings:

`length$t
固定の最小／最大~算出~縦幅を指定する。 ◎ Specifies a fixed minimum or maximum computed height.
`percentage$t
使用値を決定するときの百分率を指定する。 百分率は、生成される~boxの`包含塊$の縦幅を基準に計算される。 要素の包含塊の縦幅が明示的に指定されていない（すなわち、包含塊の内容~縦幅に依存する）, かつ 要素が`絶対位置され$てない場合の百分率~値は `min-height$p に対しては `0^v ／ `max-height$p に対しては `none^v ］に扱われる。 【算出値がこの値とされるわけではなく、以下に述べる縦幅に対する拘束を無にすると見られる。】 ◎ Specifies a percentage for determining the used value. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as '0' (for 'min-height') or 'none' (for 'max-height').
`none^v
（ `max-height$p のみがとり得る） ~boxの縦幅は制限されない。 ◎ (Only on 'max-height') No limit on the height of the box.

`min-height$p ／ `max-height$p に対する負の値は合法でない。 ◎ Negative values for 'min-height' and 'max-height' are illegal.

~CSS_2においては、［ `table^v, `inline-table^v, `table-cell^v, `table-column^v, `table-row-group^v ］に対しては， `min-height$p ／ `max-height$p の効果は定義されない。 ◎ In CSS 2, the effect of 'min-height' and 'max-height' on tables, inline tables, table cells, table rows, and row groups is undefined.

この二つの~propが `height$p ~propの`使用値$にどう波及するかについては、次の~algoで述べられる： ◎ The following algorithm describes how the two properties influence the used value of the 'height' property:

  1. 先ず、`縦幅と~marginの計算-法$に従って，仮の使用~縦幅 %H を計算する。 ◎ The tentative used height is calculated (without 'min-height' and 'max-height') following the rules under "Calculating heights and margins" above.
  2. ［ %H ~GT `max-height$p の算出値 %maxH ］ならば、 `height$p の算出値に %maxH を利用する下で，再度 `縦幅と~marginの計算-法$を適用する。 ◎ If this tentative height is greater than 'max-height', the rules above are applied again, but this time using the value of 'max-height' as the computed value for 'height'.
  3. ［ 結果の縦幅 %H ~LT `min-height$p の算出値 %minH ］ならば、 `height$p の算出値に %minH を利用する下で，再度 `縦幅と~marginの計算-法$を適用する。 ◎ If the resulting height is smaller than 'min-height', the rules above are applied again, but this time using the value of 'min-height' as the computed value for 'height'.

注記： この手続きは、上の各~propの本当の算出値には影響しない。 `height$p の使用値が変化しても、~margin相殺-法に対する効果はない。 ~marginの相殺-法における［ `min-height^p ／ `max-height^p ］用の規則から特に要求されない限り。 ◎ These steps do not affect the real computed values of the above properties. The change of used 'height' has no effect on margin collapsing except as specifically required by rules for 'min-height' or 'max-height' in "Collapsing margins" (8.3.1).

ただし、 `width$p, `height$p いずれの算出値も `auto^v であって, 内在的~縦横比を伴うような置換~要素に対しては、 縦横比を伴う~size不定の置換~要素に対する最大, 最小~size に従って、その使用値を見出す。 ◎ However, for replaced elements with both 'width' and 'height' computed as 'auto', use the algorithm under Minimum and maximum widths above to find the used width and height. Then apply the rules under "Computing heights and margins" above, using the resulting width and height as if they were the computed values.

10.8. 行高の計算： `line-height^p, `vertical-align^p ~prop

`行内~整形文脈$ 節にて述べたように、~UAは，行内levelの~boxたちを `行l~box$たちを縦方向に堆積して~flowさせる。 行高（行l~boxの縦幅）は、以下の様に決定される： ◎ As described in the section on inline formatting contexts, user agents flow inline-level boxes into a vertical stack of line boxes. The height of a line box is determined as follows:

  1. 行l~box内の 各~行内levelの~boxの縦幅は： ［ 置換~要素／ `行内-塊$要素／ `inline-table^v 要素 ］に対しては、その`~margin~box$の縦幅になる。 行内~boxに対しては、その `line-height$p になる（ `縦幅と~marginの計算-法$, および `行間$ 節の`行内~boxの縦幅$ を見よ。） ◎ The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their 'line-height'. (See "Calculating heights and margins" and the height of inline boxes in "Leading and half-leading".)
  2. 行内levelの~boxたちは、 `vertical-align$p ~propに則って縦方向に整列される。 それらが `top$v ／ `bottom$v に整列される場合、行高（~boxたちが属する行l~boxの縦幅）を最小化するように整列され~MUST。 そのような~boxたちが十分高い場合、複数の解法があり得る — ~CSS_2は、行l~boxの`基底線$の位置決め（すなわち、後述の`支柱$の位置決め）は定義しない。 ◎ The inline-level boxes are aligned vertically according to their 'vertical-align' property. In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height. If such boxes are tall enough, there are multiple solutions and CSS 2 does not define the position of the line box's baseline (i.e., the position of the strut, see below).
  3. 行高は、【同じ行l~boxの中の】 最も上側の~boxの上端と, 最も下側の~boxの下端との距離である（これには、下の `line-height$p にて説明される`支柱$も含まれる）。 ◎ The line box height is the distance between the uppermost box top and the lowermost box bottom. (This includes the strut, as explained under 'line-height' below.)

空の行内~要素は，空の行内~boxを生成するが、これらの~boxも，依然として［ ~margin, ~padding, ~border, 行高 ］を持つので、内容を伴う要素と同じく，これらの計算に波及する。 ◎ Empty inline elements generate empty inline boxes, but these boxes still have margins, padding, borders and a line height, and thus influence these calculations just like elements with content.

10.8.1. 行間と半~行間

CSS では、どの~fontも，次の記号で表される~font計量を持つものと見做される：

  • %A は、（所与の~fontの所与の~sizeに対する）`基底線$より上側の高さを意味する。
  • %D は、同様に`基底線$より下側の深さを意味する。 上端から下端までの距離は %A + %D になる。

（ TrueType／OpenType~fontの %A, %D を見出す方法 を見よ）。 これらは、全体としての~fontの計量であり、個々の~glyphの~ascenderや~descenderに対応させる必要はないことに注意。

◎ CSS assumes that every font has font metrics that specify a characteristic height above the baseline and a depth below it. In this section we use A to mean that height (for a given font at a given size) and D the depth. We also define AD = A + D, the distance from the top to the bottom. (See the note below for how to find A and D for TrueType and OpenType fonts.) Note that these are metrics of the font as a whole and need not correspond to the ascender and descender of any individual glyph.

~UAは、非置換~行内~box内の~glyphたちを，それらに関連する`基底線$により，互いに整列し~MUST。 しかる後、各~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 − ( %A + %D ) ］が決定される。 %L の半分は %A の上側に，もう半分は %D の下側に加えられ、`基底線$の~glyphとその行間による［ 総~高さ `A'^V = %A + %L ÷ 2 ／ 総~深さ `D'^V = %D + %L ÷ 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.

注記： ~CSS_2は、何が行内~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

◎名 `line-height@p ◎値 `normal$v | `number$t | `length$t | `percentage$t ◎初 `normal$v ◎適 すべての要素 ◎ all elements ◎継 される ◎百 要素~自身の~font~sizeを基準にする。 ◎ refer to the font size of the element itself ◎媒 視覚的 ◎算 指定値 — ただし、 `length$t／`percentage$t 値は絶対~長さに解決される ◎ for <length> and <percentage> the absolute value; otherwise as specified ◎表終

内容が`行内level$の要素から構成されるような，`塊~容器~要素$上に対しては：

  • `line-height$p は，要素の中の行l~boxたちの 最小の 行高（~boxの縦幅）を指定する。 最小の行高は、`基底線$の上側の最小~縦幅, 下側の最小~深さの和である
  • 各~行l~boxは、 `支柱@（ strut ） と呼ばれる仮想の~box — 要素の［ `font-size^p, `line-height$p ］~propを伴う，横幅 0 の行内~box — から開始されたかのようになる（この名前は TeX に由来する）。
◎ On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a "strut." (The name is inspired by TeX.).

~fontの`基底線$の上下側の 高さ, 深さ は、~font内に包含されている計量と見做される（詳細は、 CSS ~level 3 に）。 ◎ 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.)

非置換 `行内$ 要素に対しては、 `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の`算出値$は、この百分率~値と要素の~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 に対する負の値は合法でない。

下の例の 3 つの規則による結果の行高は、どれも同じになる： ◎ The three rules in the example below have the same resultant line height: 

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も互いに同じ ］（かつ，容器~内には 置換~要素, `行内-塊$, 等も無い）場合、上述により、連続する行lたちの互いの`基底線$は，正確に `line-height$p ずつ離れるようになる。 これは、例えば~tableなど，~columnたちを — それらの内容~textに，~columnごとに異なる~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

◎名 `vertical-align@p ◎値 `baseline$v | `sub$v | `super$v | `top$v | `text-top$v | `middle$v | `bottom$v | `text-bottom$v | `percentage$t | `length$t ◎初 `baseline$v ◎適 `行内level$の要素 ／ `table-cell^v 要素 ◎ inline-level and 'table-cell' elements ◎継 されない ◎百 要素~自身の `line-height$p を基準にする。 ◎ refer to the 'line-height' of the element itself ◎媒 視覚的 ◎算 指定値 — ただし、 `length$t／`percentage$t 値は絶対~長さに解決される ◎ for <percentage> and <length> the absolute length, otherwise as specified ◎表終

この~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 節にあたられたし。 ◎ 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は、 行内~非置換~要素に対しては，縦幅が `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に相対的に整列する。 要素の子は，要素に相対的に整列されることもあるので（したがって子孫も同様になる）、これらの値は，`整列-済み部分木$の境界を利用する。 行内~要素の `整列-済み部分木@ は、その要素, および そのすべての子~行内~要素のうち［ `vertical-align$p の算出値が `top$v ／ `bottom$v でない ］ものの`整列-済み部分木$を包含する。 `整列-済み部分木$の上端（下端）は、その部分木~内の~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
`整列-済み部分木$の上端を，行l~boxの上端に整列する。 ◎ Align the top of the aligned subtree with the top of the line box.
`bottom@v
`整列-済み部分木$の下端を，行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の算出値 ~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.