Cascading Style Sheets (CSS) Level 2

8.3.1. マージンの相殺法

CSS においては、 2 個以上の（互いに同胞【同じ親を共有する子】とは限らない）ボックスの いくつかのマージンが互いに連接しているときには， 単独のマージンを形成するように結合され得る。 この仕方でマージンたちを結合することを 相殺（ collapse ） するという†。 結合された結果のマージン【または, それを成すマージンたち】は、 相殺されたマージン （ collapsed margin ） と呼ばれる。 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.

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

連接している縦方向マージンは、 次に挙げる場合を除き，相殺される： Adjoining vertical margins collapse, except:

• 根要素により生成されるボックスのマージンは、 他のマージンとは相殺されない。 Margins of the root element’s box do not collapse.
• clearance を伴う要素の［ 上端マージン, 下端マージン ］が連接している場合、 それらのマージンは，それに連接している［ 後続する同胞のマージン ］とは相殺されるが、 その結果のマージンは，親ブロックの下端マージンとは相殺されない。 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.

横方向マージンどうしは、 決して相殺されない。 Horizontal margins never collapse.

【 CSS2 は縦書きをサポートしないので，縦方向に限定されているが、 より一般には，ブロック軸マージンに限り相殺される。 】

２つのマージンが 連接して いる（ adjoining ）とは、 ∧↓ が満たされることをいう： Two margins are adjoining if and only if:

• 当のマージンを有する両ボックスは、 同じブロック整形文脈に関与していて，次を満たす ：フロー内にあるブロックレベルである。 both belong to in-flow block-level boxes that participate in the same block formatting context

• 両マージンを分離するような［ 行ボックス／clearance ／パディング／ボーダー ］は無い。 no line boxes, no clearance, no padding and no border separate them＼

  注記： この目的においては ある種の縦幅 0 である行ボックスは、 無視されることに注意 （§ 9.4.2を見よ）。 (Note that certain zero-height line boxes (see 9.4.2) are ignored for this purpose.)

• 両マージンとも，縦方向に隣接するボックス辺に属する — すなわち、 両者は，以下に挙げるいずれかのペアを成す： both belong to vertically-adjacent box edges, i.e. form one of the following pairs:

  • ボックスの上端マージンと, ボックスの最初の［ フロー内にある子 ］の上端マージン top margin of a box and top margin of its first in-flow child
  • ボックスの下端マージンと, ボックスの次の［ フロー内にある後続する同胞 ］の上端マージン bottom margin of box and top margin of its next in-flow following sibling
  • ［ height の算出値が auto である ］ようなボックスの下端マージンと, ボックスの最後の［ フロー内にある子 ］の下端マージン。 bottom margin of a last in-flow child and bottom margin of its parent if the parent has auto computed height

  • ∧↓ を満たすボックスの［ 上端マージンと下端マージン ］：

    • 新たなブロック整形文脈を確立しない
    • min-height の算出値は 0
    • height の算出値は 0 または auto
    • フロー内にある子は無い
    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

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

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

二つ以上のマージンが相殺されるときの結果のマージン幅は、 各相殺されたマージン幅の最大になる。 負なマージンが混じっている場合、 それらの絶対値の最大が，正なマージンの最大（正なマージンが無ければ 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.

あるボックスの［ 上端マージン, 下端マージン ］が連接している場合、 他のマージンたちが，そのようなマージンを 挟むように相殺 する（ collapse through ）ことも起こり得る。 この場合のボックスの位置は、［ 【そのボックスを生成した要素と】 相殺されたマージンを成す他の要素 ］との関係性に依存する： 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.

• ［ 要素のマージン, 要素の親の上端マージン ］が相殺されている場合、 要素のボックスの上端ボーダー辺は， 親のそれと同じ位置になるものと定義される。 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.
• 他の場合、 要素の親のマージンのうち，マージン相殺の一部を成すものは、 ないか, または下端マージンのみ，のいずれかになる。 この場合の要素の上端ボーダー辺の位置は、 要素の下端ボーダーが 0 でなかったとき 【すなわち，要素の上端マージンと下端マージンとが連接してなく，相殺されなかったとき】 と同じになる。 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.

要素のマージンが挟むように相殺されている場合、 その位置が［ そのマージンを挟んでいる他のマージン ］を持つ要素の位置に効果を及ぼすことはないことに注意 — 要素の上端ボーダー辺の位置が要求されるのは、 これらの要素の子孫をレイアウトするときに限られる。 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 — スクリーン上のウィンドウあるいは見えている区画） を提供する。 UA は、 表示域がリサイズされたときには， 文書のレイアウトを変更してもよい （初期包含ブロックを見よ）。 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 は、 表示域が［ キャンバス内の，文書が描画される区画 ］より狭いときは，スクロール用の仕組みを提供するべきである。 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.

表示域は，キャンバスごとに高々一つまでであるが、 UA は，複数のキャンバスに描画してもよい （すなわち、 同じ文書に対する複数のビューを同時に供してもよい）。 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. 包含ブロック

CSS 2 においては、 多くのボックスの位置とサイズは，包含ブロック（ containing block ）と呼ばれる矩形なボックスの各辺を基準に計算される。 一般に、 生成されたボックスは，子孫ボックス用の包含ブロックとして動作する。 このことを、 ボックスは，（その子孫たち用の）包含ブロックを “確立する” という。 “ボックスの包含ブロック” という句は、 “ボックスが確立するそれ” ではなく， “ボックスは その包含ブロックの中に居る” ことを意味する。 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.

各ボックスには，その包含ブロックを基準にする位置が与えられるが、 この位置は，この包含ブロックの枠内から過フローすることもある。 Each box is given a position with respect to its containing block, but it is not confined by this containing block; it may overflow.

包含ブロックの寸法を計算する方法の詳細は、 § 包含ブロックの定義 にて述べる。 The details of how a containing block’s dimensions are calculated are described in the next chapter.

9.2.1. ブロックレベルの要素とブロックボックス

ブロックレベルの要素 とは、 視覚的にブロックとして整形されるソース文書の要素である（例： 段落など）。 要素をブロックレベルにするような display プロパティの値には，［ block, list-item, table ］がある。 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.

ブロックレベルのボックス は、 ブロック整形文脈に関与するボックスである†。 各ブロックレベルの要素は、 主要ボックス （ principal 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 ）”： 言い換えれば、［ ボックスツリーの中で，ボックスの先祖ボックスであって, かつ整形文脈を確立しているもの ］のうち，ボックスに最も近い先祖は、［ 種別が “ブロック” である整形文脈 ］を確立していて，ボックスのレイアウトは［ その種別の整形文脈に定義される規則 ］により統制される。 】

ブロックレベルの要素には、 主要ボックスの他に追加のボックスを生成させるものもある — display が list-item にされた要素など。 これらの追加のボックスは、 主要ボックスを基準に配置される。 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.

［ テーブルボックス, 置換要素 ］を除き，ブロックレベルのボックスは、 ブロックコンテナボックスでもある。 ブロックコンテナボックス は、 ブロックレベルのボックスのみを包含するか，または 行内整形文脈を確立する — すなわち，行内レベルのボックスのみを包含する。 ブロックコンテナボックスには、 ブロックレベルでないものもある — 置換されない［ 行内ブロック（ inline-block ）／ テーブル cell （ table-cell ） ］はブロックコンテナであるが、 ブロックレベルのボックスではない。 ブロックレベルのボックスであって, ブロックコンテナでもあるものは、 ブロックボックス とも呼ばれる。 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 種の用語 “ブロックレベルのボックス”, “ブロックコンテナボックス”, “ブロックボックス” は、 多義的にならない所では，単に “ブロック” と略称されることもある。 The three terms "block-level box," "block container box," and "block box" are sometimes abbreviated as "block" where unambiguous.

【 整形文脈における これらのボックスの役割については、 § 9.4.X にて，俯瞰する。 】

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

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

<body>
<p>
span の前にある匿名テキスト
<span>span の内容</span>
span の後にある匿名テキスト
</p>
</body>

9.2.2. 行内レベルの要素と行内ボックス

行内レベルの要素 は、 ソース文書の要素であって，その内容により，新たなブロックが形成されないものである†。 その内容 （例：段落の中で強勢されるテキスト片, 行内画像, 等々）は、 何行かに分布する。 display プロパティに対する値［ inline, inline-table, inline-block ］は、 要素を行内レベルにする。 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.

行内レベルの要素は、 行内レベルのボックス を生成する。 それは、 行内整形文脈に関与するボックスである。 Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context.

【† 実際には，前節の例のようにブロックを生成する要素を包含することもあるので、 この定義は厳密さに欠く。 （課題 #1477） 】

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

9.2.3. 同行見出し（ run-in ）ボックス

この節は、 以前の草案と節番号を揃えるためにある。 display 用の run-in 値は、 今や CSS3 （CSS basic box model 【 [CSS-DISPLAY-4] § 同行見出しレイアウト】 にて定義される。 [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 プロパティ

このプロパティ用の各種値の意味は： The values of this property have the following meanings:

block

この値は、 要素にブロックボックスを生成させる。 This value causes an element to generate a block box.

inline-block

この値は、 要素に行内レベルのブロックコンテナを生成させる。 inline-block の内側は，ブロックボックスとして整形される一方で、 要素それ自身は不可分な行内として整形される。 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

この値は、 要素に一つ以上の行内ボックスを生成させる。 This value causes an element to generate one or more inline boxes.

list-item

この値は、 要素に主要ブロックボックスに加えて，マーカボックスも生成させる （例：HTML の li ）。 リスト, および その整形の例については、 § リスト に諮られたし。 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

この値は、 要素が整形構造に現れないようにする （すなわち，視覚媒体においては、 要素は，ボックスを生成せず, レイアウトに効果を及ぼすこともなくなる）。 要素のどの子孫も，ボックスを生成しなくなり、 要素とその内容は，整形構造から全面的に除去される。 子孫に display プロパティを設定しても， このふるまいが上書きされることはない。 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 は、 不可視なボックスを作成するものではないことに注意。 それは、 ボックスを まったく作成させなくする。 CSS には、 要素が［ 整形に影響しつつ，それ自身は可視でない【すなわち，透明な】ボックス ］を整形構造内に生成する仕組みもある。 詳細は、 § 可視性に諮られたし。 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

inline-table

<table-*>

これらの値は、 要素を table 要素の様にふるまわせる （§ テーブル に述べられる制約の対象になる）。 These values cause an element to behave like a table element (subject to restrictions described in the chapter on tables).

ここで：

<table-*>
	= table-row-group
	| table-header-group
	| table-footer-group
	| table-row
	| table-column-group
	| table-column
	| table-cell
	| table-caption

これらの値の意味は、 § テーブルモデルにて定義される。

【 この <table-*> は、 他から簡潔に参照できるよう，この訳に導入した非公式な値型である （これらの値は、 テーブル整形文脈に関与するボックスを生成させる）。 】

算出値は、 指定値と同じになる。 ただし，［ 有位置な要素, 浮動要素, 根要素 ］に対する場合は除く — § display, position, float の関係性 を見よ。 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 の初期値は inline とされているが、 多くの要素では，この値は［ UA の既定のスタイルシートによる規則で上書きされ得る ］ことに注意。 [HTML401] 用のスタイルシートの見本を見よ†。 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] ）における UA スタイルシートは、 その § 具現化 に定義される。 】

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

9.3.1. 位置決めスキームの選択： position プロパティ

【 この節の内容は、 今や [CSS-POSITION-3] § 位置決めスキームの選択 にて定義されるので，和訳は省略する。 】

9.3.2. ボックスのオフセット： top, right, bottom, left

【 この節の内容は、 今や [CSS-POSITION-3] § ボックスインセット にて定義されるので，和訳は省略する。 】

9.4.X. 【ブロック整形文脈における各種ボックスの位置付け】

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

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

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

整形文脈の下位ツリーの中で，新たな整形文脈を確立するものは、 親の整形文脈の視点からは，末端の（ “不透明な” ）ボックスになる。 すなわち、 子孫の整形文脈に関与する内容のレイアウトには，親の整形文脈による統制は及ばない — 及ぶのは、 子整形文脈の根である末端ボックスのサイズ／位置に限られる。 一般に、 CSS に規定されるレイアウト特能のほとんどは，整形文脈を超えて影響しあうことはない （浮動体は、 ブロック整形文脈と行内整形文脈との間で影響しあう点で特別だが）。

この仕様が定義するブロック整形文脈を成す下位ツリーにおいては：

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

  • 根以外のすべてのボックスは、 ブロックレベルのボックスである。 そのうち，浮動ボックスのみがフロー外にある。
  • 末端以外のすべてのボックスは、 （ブロックレベルのボックスを包含する方の）ブロックコンテナである。
  • よって、 末端でも根でもない すべてのボックスは，ブロックボックスになる。

• 末端のボックスは、 次の３種に大別される：

  • 行内整形文脈を確立するもの （ブロックレベルのボックスを包含しない方のブロックコンテナボックス）。 次項に該当しない，内容が空なボックスは、 形式的に［ 0 個の行ボックスを生成する行内整形文脈を確立する ］ものと見做す下で、 ここに分類される。
  • 行内整形文脈でない整形文脈を確立するもの — 例えば、 テーブルレイアウト, あるいは flex レイアウトなどの CSS3 で定義される各種整形文脈。 ブロック整形文脈も末端に入れ子にされ得る。 overflow が visible でないものや，浮動ボックスは、 ここに分類される。
  • 置換要素。 （言い換えれば、 “CSS からは未知な整形文脈” を確立するもの。）
• 根ボックスは、 別の整形文脈の末端であるか，ボックスツリー全体（根要素が確立する整形文脈）の根になる。 親の整形文脈が行内整形文脈である（したがって，行内レベルのボックスである）ような 根ボックスは、 特に，不可分な行内と呼ばれ、 複数の行ボックスに分断されてフローされることはない。

行内整形文脈は、 親の整形文脈がブロック整形文脈でないならば，暗黙的にブロック整形文脈も成すと見なされる点で特別な地位にある（すなわち，このブロック整形文脈の根自身が末端の行内整形文脈を確立する）。 言い換えれば、 “ブロックレベル”／“行内レベル” の区別が意味を成すのは，ブロック整形文脈の中に限られる — 他の種別の整形文脈の中の行内レベルのボックスは、 常にブロック整形文脈の中に包装されることになるので（ブロック整形文脈, 行内整形文脈をひっくるめたものは、 フローレイアウトとも呼ばれている）。 “ブロックコンテナ” という用語は、 ブロック整形文脈でない整形文脈の中で利用されることもある — その場合、 ブロックコンテナ自身がブロック／行内整形文脈を確立していることを含意する。 また，ブロック／行内整形文脈でない整形文脈においては、 通例，ボックスは浮動されないことになる（ float を非 none に設定しても効果はない） — その文脈におけるふるまいが新たに定義されない限り。 したがって、 浮動という用語は，ブロック整形文脈の存在を含意することになる。

9.4.1. ブロック整形文脈

ブロック整形文脈の下では、 各ボックスは，包含ブロックの上端から, 縦方向に, 順々に，レイアウトされる。 2 個の同胞ボックスの縦方向の間隔は、 それらの 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.

ブロック整形文脈の下では、 各ボックスの左端外縁辺は， 包含ブロックの左端辺に接する（右横書き整形に対しては右端辺どうしが接する）。 このことは、 浮動体が存在していても成り立つ（ボックス内の 行ボックス は、 浮動体に因り縮短され得るが） — そのボックスが，新たなブロック整形文脈を確立するのでない限り （この場合、 ボックス自身は，浮動体に因りより幅狭になり得る）。 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).

ページ化媒体におけるページ分断については、 § 許容されるページ分断に諮られたし。 For information about page breaks in paged media, please consult the section on allowed page breaks.

9.4.2. 行内整形文脈

行内整形文脈の下では、 ボックスたちは，その包含ブロックの上端から, 横方向に，順々にレイアウトされていく。 これらのボックスの合間の横方向［ マージン／ボーダー／パディング ］は、 尊重される†。 一連のボックスが縦方向に整列される仕方は、 様々になり得る： それらの下端／上端が，互いに整列されることもあれば、 それらのテキストの基底線が 互いに整列されることもある。 ある一つの行を形成するボックスたちを包含する矩形な区画は、 行ボックス と呼ばれる。 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.

【† 行内レベルの置換されない要素に対しては、 縦方向のマージンによる効果はない。 また，［ ボーダー／パディング ］は、 縦方向でも効果はあるが，行ボックスの縦幅には影響しない（下に例を示す）。 】

行ボックスの横幅は、 その包含ブロックと, 浮動体の有無により決定される。 行ボックスの縦幅は、 § 行高の計算 に与える規則から決定される。 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.

行ボックスの高さは、 常に，それを形成しているすべてのボックスを包含するに十分な高さにされる。 しかしながら，この高さは、 それらのボックスの高さの最大よりも高くなる場合もある （例えば、 ボックスたちが互いの基底線が揃うように整列されている場合）。 ボックス B の縦幅が行ボックスより狭い場合の，その行ボックスの中での B の縦方向の整列は、 vertical-align プロパティにより決定される。 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.＼

行内レベルのボックスたちが単独の行ボックスの中に横方向に収まり切らない場合、 収まり切らない部分は，次の行ボックスに折り返され 【これは、 1 個の行内レベルのボックスを複数個の行ボックスに分断し得る】 、 縦方向に堆積されていく。 したがって、 段落は，縦方向に堆積する行ボックスたちからなる。 行ボックスたちが堆積されるときは、 （他から指定されない限り）縦方向に離されることなく，また 重なり合うことも決してない。 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.

一般に、 行ボックスの［ 左端辺／右端辺 ］は，その包含ブロックの［ 左端辺／右端辺 ］に接する。 しかしながら、 包含ブロックの辺と行ボックス辺の合間に，浮動ボックスが来ることもある。 したがって、 同じ行内整形文脈 内の行ボックスたちの横幅は，一般的には同じ（包含ブロックの横幅）になるが、 横方向に可用な空間が浮動体に因り抑制される場合には，変わり得ることになる。 また、 一般に，同じ行内整形文脈に関与する各行ボックスの縦幅も，まちまちになり得る（例：背が高い画像を包含する行と, テキストのみを包含する行など）。 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).

同じ行ボックス上にある一連の行内レベルのボックスの横幅の合計が，その行ボックスの横幅より狭い場合、 その行ボックスにおける，それらの横方向の分布は、 text-align プロパティにより決定される。 そのプロパティの値が justify 【 “両端揃え” 】 ならば、 UA は，行内ボックス （ただし，［ inline-table, inline-block ］ボックスは除く） 内のスペースや単語を伸張してもよい。 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.

行ボックスの横幅を超過するような行内ボックスは、 複数の行ボックスにわたるように，いくつかのボックスに分割される。 分割できない行内ボックスは、 行ボックスを過フローする（例： 単独の文字からなる行内ボックス ／ 言語に特有な単語分断規則から 行内ボックスの中での分断【 “改行” 】が許容されていない ／ 行内ボックスに対する white-space 値が nowrap または pre にされている）。 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.

行内ボックスが分割されるとき、 どの分割の切り口の所でも，［ マージン／ボーダー／パディング ］による視覚的な効果はない。 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).

行内ボックスは、 双方向テキスト処理に因り， 同じ行ボックスの中であっても，複数のボックスに分割されることもある。 Inline boxes may also be split into several boxes within the same line box due to bidirectional text processing.

【† この “保全空白” には，改行文字も含まれる。 】【†† この 0 は、 横方向マージン用の auto 値も含む（行内要素に対しては，その使用値は 0 になるので）。 また、 縦方向の［ マージン, パディング, ボーダー ］は何であれ，上の条件に影響しない （それは、 行ボックスの縦幅に影響しないので）。 】【††† その行ボックスを生成させた要素の，子孫が生成するボックス。 】【†††† 例えば、 浮動体の現在の行の位置。 】

<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 ボックスは， 2 個の em ボックスたちに分割された （以下 前半, 後半 と記す）。 このボックス用の［ マージン, ボーダー, パディング, テキスト装飾 ］は、［ 前半 の終端／ 後半 の始端 ］に対しては可視効果を持たない。 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] § 相対位置決め にて定義されるので，和訳は省略する。 】

9.5.1. 浮動体の位置決め： float プロパティ

このプロパティは、 ボックスが浮動すべきかどうか，浮動するならば［ 左方, 右方 ］どちらへ浮動するかを指定する。 どの要素にも設定し得るが、 絶対的に位置されたボックスを生成する要素には適用されず， その算出値も改められることになる — § 9.7を見よ。 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.＼

【† CSS 2 に限らなければ、 適用されないものは他にもある。 CSS 2 では定義されない多くのレイアウトモデル（例：flex レイアウト）においては、 このプロパティは，それらの整形文脈に関与するボックス（例：flex アイテム）には適用されない。 】

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

left

要素は、 左へ浮動するボックス — 左方へ浮動されるブロックボックス — を生成する。 周りの内容は、 ボックスの右脇に, かつ ボックスの上端からフローする（ clear プロパティの対象になる）。 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

要素は、 右へ浮動するボックス — 右方へ浮動されるブロックボックス — を生成する。 周りの内容は、 ボックスの左脇に, かつ ボックスの上端からフローする（ clear プロパティの対象になる）。 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

ボックスは浮動されない。 The box is not floated.

UA は、 根要素に対しては，その float を none に扱ってもよい。 User agents may treat float as none on the root element.

1. 所与の左へ浮動するボックス L に対し ：L の左端は， L の包含ブロックの左端より左に位置しない

   右へ浮動するボックスについても相似的な規則が課されるとする。

   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. 所与の左へ浮動するボックス L1, L2 に対し， L1 は L2 に先行するならば、 ∨↓ が満たされる：

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

   右へ浮動するボックスについても相似的な規則が課されるとする。

   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. 所与の左へ浮動するボックス L, 右へ浮動するボックス 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. 所与の浮動ボックス F に対し ：F の上端は、 F の包含ブロックの上端より上に位置しない A floating box’s outer top may not be higher than the top of its containing block.＼
5. 相殺される 2 つのマージンの合間にある浮動体は、［ そのフローの一部を成す，浮動体の他は内容が空な匿名ブロックボックスである親 ］があるかのように位置される。 【浮動体の現在の行は、この親に包含される縦幅 0 の行ボックスになる。】 そのような親の位置は、 § マージン相殺の規則にて定義される。

   <div style="margin-bottom:1em;">ブロック</div>
   <span style="float:left;">左へ浮動するボックス</span>
   <div style="margin-top:1em;">ブロック</div>
   

   ブロック

   左へ浮動するボックス

   ブロック

   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. 所与の浮動ボックス F, および F に先行する［ ブロックボックス／浮動ボックス ］ 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. 所与の浮動ボックス F, および［ F に先行する あるボックスを包含している行ボックス 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. 所与の左へ浮動するボックス L に対し， L の左端が，包含ブロックの左端に接していないならば† ：L の右端は，包含ブロックの右端より右に位置しない

   右へ浮動するボックスについても相似的な規則が課されるとする。

   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 が設定された浮動体に対する 追加の拘束。 】
10. 以上による制約の下で、 浮動ボックスは 可能な限り上方に配置する。 A floating box must be placed as high as possible.
11. 前項も含め，以上による制約の下で、［ 左へ浮動する／右へ浮動する ］ボックスは 可能な限り［ 左方／右方 ］に配置する。 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>

ただし，CSS 2 においては、 次の様な浮動体 F の位置は未定義である： ［ F と同じブロック整形文脈に属する, フロー内にある負な縦方向マージン ］があって，［ そのようなマージンすべてが 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. 浮動体の脇へのフローの制御法： clear プロパティ

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

left

要素に先行するすべての左へ浮動するボックス。 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

要素に先行するすべての右へ浮動するボックス。 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

要素に先行するすべての浮動ボックス。 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

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

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

none 以外の値に対しては、 clearance が導入され得る。 clearance は、 マージン相殺を妨げつつ，要素の margin-top の上方におけるアキ組として動作する。 それは、 浮動体の側方に重なり合わない所まで，要素を下方へ押出すために利用される。 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.

要素の 仮の位置 とは、 要素が［ その clear プロパティが none である下で配置されたとき ］の，上端ボーダー辺として与えられる。 要素は、 その 仮の位置 が，要素の clear 対象に含まれている いずれかの浮動体の側方にあるとき、 clearance を持つ とされ、 clearance が導入されることになる （必然的に、 要素の clear の算出値は，非 none である必要がある）。 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 を持つ場合、 要素とその周りの要素によるマージン相殺のふるまいも， § マージンの相殺法に則って変化し、 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. 要素が生成するブロックの上端ボーダー辺を［ clear 対象の浮動体の下端外縁辺のうち，最も下方にある位置 ］に配置するために必要とされる量。

     【 clearance がこの量で与えられる場合、 ブロックの上端マージンは，ブロックの上端位置に影響しなくなることになる。 】

     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. ブロックの上端ボーダー辺を 仮の位置 に配置するために必要とされる量。

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

     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 プロパティが浮動要素に設定されたときは、 浮動体の位置決め規則に次の拘束も追加される： 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 プロパティは、 [CSS1] においては 【行内レベルも含め】 すべての要素に適用される — したがって、 すべての要素上でこのプロパティをサポートする実装もある。 ［ [CSS20] ／CSS 2 ］においては、 ブロックレベルの要素のみに適用される。 したがって、 作者は，このプロパティをブロックレベルの要素に限って利用するべきである。 clear を行内レベルの要素 上でもサポートする実装は、 上に説明した clearance を設定するのでなく，分断を強制するべきである — 実質的には、 空な行ボックスを一つ以上挿入する （または、 § 9.5 にて述べたとおり，新たな行ボックスを下方へずらす） ことにより、［ clearance を持つような行内レベルの要素を含んでいる行ボックス ］の上端を clear 対象の どの浮動ボックスよりも下へ移動させる ］ことになる。 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. 積層レベルの指定法： z-index プロパティ

z-index プロパティは、 要素が生成する有位置なボックスに対し，次を指定する： For a positioned box, the z-index property specifies:

• ボックスが属している積層文脈における，ボックスの積層レベル。 The stack level of the box in the current stacking context.
• ボックスは積層文脈を確立するかどうか。 Whether the box establishes a stacking context.

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

<integer>

生成されるボックスは、 新たな積層文脈を確立する。 ボックスの積層レベルは，所与の整数になる。 This integer is the stack level of the generated box in the current stacking context. The box also establishes a new stacking context.

auto

生成されるボックスの積層レベルは， 0 になる。 ボックスは、 根要素でない限り，新たな積層文脈を確立しない†。 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.

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

この節の表記 “手前” は、 利用者が面するスクリーンから，利用者に近づく方を意味する In this section, the expression "in front of" means closer to the user as the user faces the screen.

CSS 2 においては、 各ボックスは，［ 横方向, 縦方向 ］位置に加え， “z-軸” 方向（スクリーン面から垂直に利用者に近づく方向）の位置 — 略して z-位置 — も持つ。 z-位置は、 特にボックスどうしが視覚的に重なり合う場合に関わり， 整形する際の他のボックスによる層との重なり順を表す。 この節は、 各ボックスが 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.

描画ツリーがキャンバスに塗られる順序は、 積層文脈を通して述べられる。 積層文脈は、 別の積層文脈を包含し得る†。 積層文脈は、 その親の積層文脈の視点からは不可分である — それらのボックスたちの合間に，他の積層文脈に属するボックスが来ることはない††。 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.

【† すなわち、 各 積層文脈は，ボックスツリーの中の ある下位ツリーを表現する。 】【†† すなわち、 親積層文脈の視点からは，不可分な一枚の層（＝末端の子孫）として扱われる。 】

根要素は、 根積層文脈【積層文脈たちが成すツリーの根】を形成する。 他の積層文脈は、 有位置な要素（相対的に位置された要素も含む）のうち z-index の算出値が auto 以外をとるものにより生成される。 積層文脈は、 包含ブロックに関係するとは限らない。 将来レベルの CSS では、 他のプロパティからも積層文脈が導入され得る — 例えば opacity 。 【課題 #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. 積層文脈を確立している要素の［ 背景とボーダー ］。 the background and borders of the element forming the stacking context.
2. 子積層文脈のうち，積層レベルが負なもの（最も負なものが最初）。 the child stacking contexts with negative stack levels (most negative first).

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

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

この塗り順序は、 各積層文脈に対し，再帰的に適用される。 この，積層文脈の塗り順序の記述は、 付録 E による詳細な規範的定義の概観である。 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"
    >
      
このテキストは、
見本画像より手前の層に来る
This text will overlay the butterfly image.
    </div>

    <div id="text2">
      
このテキストは、
一番奥の層に来る
This text will be beneath everything.
    </div>

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

この例は、 透明度の観念をデモる。 背景に対する既定のふるまいでは、 背後にあるボックスは可視にされる。 この例では、 各ボックスは，下層のボックスの上層に透明に重ねられる。 このふるまいは、 既存の各種 背景プロパティ のいずれかを利用して上書きできる。 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. 各種ボックスに対する横幅の計算法

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

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

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

   通常フロー内にある行内レベルの要素

   浮動体

   不定な W は：

   • 行内ボックスに対しては、 width は適用されないので，計算されない。
   • 他（行内ブロック, 浮動体）に対しては、 内容が収まるサイズ† （ “ shrink-to-fit（収まるよう縮短した）” サイズ） に解決する。 【†ここでは、 [CSS-SIZING-3] の用語を利用して，原文の記述を省略する。】

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

   通常フロー内にあるブロックレベルの要素

   § 10.3.3 にて与えられる。

10.3.1. 行内ボックスを生成する要素

§ 各種ボックスに対する横幅の計算法 を見よ。 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. 行内レベルの置換要素

§ 各種ボックスに対する横幅の計算法 を見よ。 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. 通常フロー内にあるブロックレベルの置換されない要素

W は不定でない：

先ず，［ W + ( 不定でない mL ) + ( 不定でない mR ) > 包含ブロックの横幅 − 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 プロパティに応じて：

• ltr ならば： mR を不定とみなして， mR について等式を解いて解決する。
• rtl ならば： 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. 通常フロー内にあるブロックレベルの置換要素

§ 各種ボックスに対する横幅の計算法, および § 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. 浮動している置換されない要素

§ 各種ボックスに対する横幅の計算法 を見よ。 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. 浮動している置換要素

§ 各種ボックスに対する横幅の計算法 を見よ。 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] の対応する節 に移譲。 】

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

【 この節の内容は、 [CSS-POSITION-3] の対応する節 に移譲。 】

10.3.9. 通常フロー内にある置換されない行内ブロック要素

§ 各種ボックスに対する横幅の計算法 を見よ。 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. 通常フロー内にある行内ブロック置換要素

§ 各種ボックスに対する横幅の計算法 を見よ。 Exactly as inline replaced elements.

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

生来な縦横比を伴う置換要素のうち［ width, height ］とも auto が指定されているものに対しては、［ min-*, max-* ］プロパティは，要素の［ width, height ］の使用値に次に従うように影響する：

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

   • ( W, H ) :← § 置換要素のサイズ法 に従って得られる “仮の” ( 横幅, 縦幅 )
   • nA :← W ÷ H（ = 生来な縦横比）
   • minW :← min-width の算出値
   • maxW :← max( minW, max-width の算出値 ) †
   • minH :← min-height の算出値
   • maxH :← max( minH, max-height の算出値 ) †

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

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

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

   • 横幅（ width ） = max(X, minW)
   • 縦幅（ height ） = max(X ÷ nA, minH)
   • X = min( maxW, maxH × nA, max( W, minW, minH × nA ) )

   【 この式は、 原文の多岐にわたる場合分けを場合分けなしに集約したものである。 概念的には、 元の矩形を， (1) 先ず，サイズ minW × minH の矩形を包含するように，必要なら — 縦横比を保ちながら — 拡大して、 (2) 次に，サイズ maxW × maxH の矩形に収まるように，必要なら — 縦横比を保ちながら — 縮小して、 (3) 最後に，サイズ 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, height のうち片方には非 auto, もう片方には auto が指定されている場合、 auto にされた方に対し［ min-* ／ max-* ］によるサイズの拘束を適用したときに，拘束され過ぎになり得る。 この仕様は、 ふるまいにおいて明瞭であるが，作者の期待には沿わないかもしれない。 異なる結果を得たいときは、 CSS 3 object-fit プロパティを利用できる。 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 ／ height ］に対する この新たな使用値を算出値とみなす下で，［ § 横幅とマージンの計算法 ／ § 縦幅とマージンの計算法 ］を適用して、 不定なマージンを解決する。 Then apply the rules under "Calculating widths and margins" above, as if width were computed as this value.

10.6.X. 各種ボックスに対する縦幅の計算法

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

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

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

   1. 不定な［ mT ／ mB ］は ：行内ボックスに対しては、縦方向マージンは適用されないので計算されない ／ 他の要素に対しては、 0 に解決する

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

      新たなブロック整形文脈を確立する要素

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

      • 通常フロー内にあるブロックレベルの要素であって overflow の算出値が visible でないもの — (A) ただし、 overflow プロパティ値が表示域に伝播されているものは除く。
      • 行内ブロック
      • 浮動体

      行内レベルの要素に対しては、 それを包含する行ボックスの縦幅を計算するときには，要素のマージンボックスが利用される。

      新たな整形文脈を確立しない，行内レベルの要素（通常フロー内に行内ボックスを生成するもの）

      § 10.6.1 にて与えられる。

      新たな整形文脈を確立しない，ブロックレベルの要素

      行内整形文脈を確立するボックスを生成する，ブロックレベルの要素

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

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

      その整形文脈の規則に従う — この文書では定義されない。 CSS 2 においては、 テーブルボックスが該当する。

10.6.1. 行内ボックスを生成する要素

行内ボックスに対しては height は適用されないので、 不定な H も計算されない。 内容区画の縦幅はフォントに基づくべきであるが、 この仕様では，その方法は指定されない。 UA は、 例えば， em-box や, フォントの最大な アセンダ／ディセンダ を利用してもよい （後者の場合、 em-box の上下にはみ出るグリフがあっても， 内容区画の中に収まることを確保するが、 ボックスのサイズがフォントごとにまちまちになる。 前者の場合、 作者は line-height に相対的な背景のスタイル付けを制御できるようになるが、 グリフの一部は，内容区画の外に塗られるようになる。） 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 3 では，おそらく、［ フォントのどの計量を内容縦幅に利用するか ］を選定するようなプロパティが含められることになる。 Note: level 3 of CSS will probably include a property to select which measure of the font is used for the content height.

行内ボックスの縦方向の［ パディング, ボーダー, マージン ］は、 内容区画の 上端／下端 から開始される — line-height は、 行ボックスの縦幅を計算するときに利用されるだけで，それには関わらない。 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.

複数のフォントが利用される場合 （利用されるグリフが，他と異なるフォント内に見出されたときに起こる） の内容区画の縦幅は、 この仕様では定義されない。 しかしながら，縦幅は、 内容区画が，要素内容に利用されるすべてのフォントの［ em-box , または 最大なアセンダと最大なディセンダの和 ］を収めるに十分な高さにすることが示唆される。 これは、 フォントの基底線の整列に依存して，利用される どのフォントサイズよりも大きくなり得ることに注意。 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. 通常フロー内にある［行内レベル／ブロックレベル／行内ブロック］置換要素／浮動している置換要素

§ 各種ボックスに対する縦幅の計算法 を見よ。 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. 通常フロー内にあるブロックレベルの置換されない要素

§ 各種ボックスに対する縦幅の計算法 （新たな整形文脈を確立しない場合）も見よ。 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 は、［ 要素がブロックレベルの子を持つかどうか, および パディングまたはボーダーを持つかどうか ］に依存して、［ 要素が生成するボックス box の内容区画の上端辺 ］から［ 次のうち最初に該当するもの ］までの距離に解決する： The element’s height is the distance from its top content edge to the first applicable of the following:

1. box は行内整形文脈を確立している 【すなわち、ブロックレベルの子を持たない】 , かつ 行ボックスを一つは含む場合 ：最後の行ボックスの下端辺 the bottom edge of the last line box, if the box establishes a inline formatting context with one or more lines

2. box の子にフロー内にあるものがある場合、 そのような子のうち最後のものを E とするとき：

   1. E の下端マージン m と, box の下端マージンとが相殺されない場合 ：m のマージン辺（ m は，場合によっては他と相殺される）
   2. box の上端マージンと下端マージンとが相殺されない場合 ：E の下端ボーダー辺
   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 marginthe 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

通常フロー内にある子のみが織り込まれる （すなわち，［ 浮動体 ／絶対的に位置されたボックス ］は無視され、 相対的に位置されたボックスは，オフセットされていないと見なす）。 子ボックスは匿名ブロックボックスの場合もあることに注意。 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] の対応する節 に移譲。 】

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

【 この節の内容は、 [CSS-POSITION-3] の対応する節 に移譲。 】

10.6.6. 複雑な事例

§ 各種ボックスに対する縦幅の計算法 （新たな整形文脈を確立する場合）を見よ。 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 縦幅

ブロック整形文脈を確立する要素に対する不定な 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:

要素は行内レベルの子のみを持つ場合【すなわち，ブロックレベルの子を持たない】 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.

要素はブロックレベルの子を持つ場合 【すなわち，行内レベルの子は匿名なブロックレベルのボックスで包装される】 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.

絶対的に位置された子は 無視され、 相対的に位置されたボックスは オフセットなしと見なされる。 匿名ブロックボックスになる子ボックスもあることに注意。 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 は、 行内ボックス内のグリフたちを， それらに関連する基底線により互いに整列するものとする。 しかる後、 各グリフに対し， A, D を決定する。 同じ要素にて，異なるフォントのグリフが利用されることもあるので、 すべてのグリフが同じ A, D になるとは限らないことに注意。 行内ボックスがグリフを一つも包含しない場合、 要素にて可用な最初のフォントの A, D を伴うような， 支柱（横幅 0 の不可視なグリフ）を包含するものと見なされる。 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.

各グリフに対し、 加えられる “行アキ” ［ L = line-height − ( A + D ) ］が決定される。 L の半分は A の上側に，もう半分は D の下側に加えられ、 基底線のグリフとその行アキによる［ 総高さ A' = A + L ÷ 2 ／ 総深さ D' = 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.

行内ボックスの縦幅は，［ すべてのグリフ, それらの上下各側の半行アキを囲い込む ］ので、 正確に line-height に等しくなる。 子要素のボックスは、 この縦幅には波及しない。 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.

置換されない要素の［ マージン ／ ボーダー ／ パディング ］は、 行ボックス計算には関与しないが，依然として，行内ボックスの周囲に描画される。 ゆえに、［ line-height により指定された縦幅 ］が［ 要素に包含されるボックスの内容縦幅 ］より小さい場合には、［ パディング／ボーダー ］の背景と色が，連接している行ボックスの中まで “拡幅” され得ることになる。 UA は、 各ボックスを文書順序で描画するべきである。 したがって、 後続の行のボーダーは，先行する行のボーダーやテキストの上に塗られることになる。 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 は、 何が行内ボックスの内容区画とされるかについては定義しない （ § 10.6.1 を見よ）。 したがって、 背景やボーダーが描かれる所は，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 フォントを利用する実装は、 A, D に対し， （現在の要素のフォントサイズに拡縮した後の）［ フォントの OS/2 テーブルによる計量 “sTypoAscender”, “sTypoDescender” ］を利用することが推奨される。 これらの計量が無い下では、［ HHEA テーブルによる計量 “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 プロパティ

フォントの基底線の上下側の［ 高さ, 深さ ］は、 フォント内に包含されている計量と見做される （詳細は、 CSS 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 は，行高の計算に利用される縦幅を指定する。 On a non-replaced inline element, line-height specifies the height that is used in the calculation of the line box height.

このプロパティに対する各種 値の意味は： Values for this property have the following meanings:

normal

UA は、 使用値を要素のフォントに基づく “適度な” 値に設定する。 値は <number> と同じ意味を持つ。 normal に推奨される使用値は、 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>

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

<number>

プロパティの使用値は、 この数値と要素のフォントサイズとの積になる。 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>

プロパティの算出値は、 この百分率値と要素のフォントサイズとの積になる。 The computed value of the property is this percentage multiplied by the element’s computed font size. Negative values are illegal.

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

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

要素が，複数のフォントで描画されるテキストを包含する場合、 UA は，［ line-height 用の値 normal ］を最大なフォントサイズに則って決定してもよい。 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.

注記： ブロックコンテナボックス内のすべての行内ボックスにおいて［ （ normal 以外の） line-height 値は互いに同じ ］かつ［ 利用している最初に可用なフォントも互いに同じ ］（かつ，コンテナ内には 置換要素, 行内ブロック, 等も無い）場合、 上述により， 連続する行たちの互いの基底線は正確に line-height ずつ離れるようになる。 これは、 例えばテーブルなど，column たちを — それらの内容テキストに，column ごとに異なるフォントが利用されるときでも — 互いに整列させる必要があるときに，重要になる。 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 プロパティ

このプロパティは、 行内レベルの要素により生成されるボックスに対する，［ 行ボックスの内側における縦方向の位置決め ］に影響する。 This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.

注記： このプロパティの値は、 テーブルの文脈では異なる意味になる。 詳細は、 § テーブル縦幅のアルゴリズム に諮られたし。 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.

以下の定義において，整列に利用されるボックスは、 行内ボックスに対しては，縦幅が line-height にされた （ボックスのグリフと各側の半行アキを包含している）ボックスであり、 他のすべての要素に対しては，そのマージンボックスである。 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

ボックスの基底線を，親ボックスの基底線に整列する。 基底線を持たないボックスに対しては、 下端マージン辺を親の基底線に整列する。 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

ボックスの縦方向の中点を，親ボックスの基底線から親の 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

ボックスの基底線を，親のボックスの下付き文字に対する適正な位置まで下げる （この値は、 要素のテキストのフォントサイズに効果を及ぼすことはない）。 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

ボックスの基底線を，親のボックスの上付き文字に対する適正な位置まで上げる （この値は、 要素のテキストのフォントサイズに効果を及ぼすことはない）。 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

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

text-bottom

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

<percentage>

ボックスを，この距離（ line-height 値の百分率）だけ上げる（正な値）／下げる（負な値）。 値 0% は baseline と同じ意味になる。 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>

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

以下に定義される各種 値は、 要素を行ボックスに相対的に整列する。 要素の子は，要素に相対的に整列されることもあるので （したがって子孫も同様になる）、 これらの値は，整列済み下位ツリーの限界域を利用する。 行内要素の 整列済み下位ツリー は、 その要素, および そのすべての子行内要素のうち［ vertical-align の算出値が top ／ bottom でない ］ものの整列済み下位ツリーを包含する。 整列済み下位ツリーの上端（下端）は、 その下位ツリー内のボックスのうち，最も高い上端（下端）である。 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

整列済み下位ツリーの上端を，行ボックスの上端に整列する。 Align the top of the aligned subtree with the top of the line box.

bottom

整列済み下位ツリーの下端を，行ボックスの下端に整列する。 Align the bottom of the aligned subtree with the bottom of the line box.

inline-table の基底線は、 テーブルの最初の row の基底線とする。 The baseline of an inline-table is the baseline of the first row of the table.

行内ブロック B の基底線は、［ B の overflow プロパティの算出値 ＝ visible ］かつ［ B 内にフロー内にある行ボックスはある ］ならば，それらの行ボックスのうち最後のものの基底線とする。 他の場合は B の下端マージン辺とする。 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.