css2-ja.html

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8">
<title>Cascading Style Sheets (CSS) Level 2（日本語訳）</title>

<link rel="stylesheet" href="common.css" type="text/css">
<link rel="stylesheet" href="common-css.css" type="text/css">

<style>

figure {
	background: var(--W-color);
	padding: 0.5em 0.5em 0 0.5em;
}

.math {
	white-space: pre;
}

#anon-block {
	background: #EEE;
	color:black;
	border: solid blue 1px;
	padding:0.2em;
	font-size: 2rem;
	width: 20rem;
	white-space: nowrap;
}

#anon-block ._label {
	font-size: 1rem;
	background: white;
}
#anon-block ._box {
	background: silver;
	padding: 0.2rem 2rem;
	margin-bottom: 0.2rem
}

._ex-block-in-a-inline {
	padding: 0.5em;
	background: var(--pale-color);
	line-height: 2em;
	width: 20em;
}

._ex-block-in-a-inline > span {
	border:solid 2px var(--R-color);
}
._ex-block-in-a-inline > span > span {
	display: block
}


#_flow-next-to-sample,
#_flow-next-to-floats,
#_flow-next-to-higher-floats {
	width:20em;
	border:solid 1px currentcolor;
	padding: 0.5em;
}

#_flow-next-to-floats > ._fL {
	float: left;
}
#_flow-next-to-floats > ._fR {
	float: right;
}
#_flow-next-to-higher-floats > ._fL {
	float: left;
	border-bottom: solid 2px var(--R-color);
}
#_flow-next-to-higher-floats > ._fR {
	float: right;
	border-bottom: solid 2px var(--R-color);
}

._ex-parabox {
	margin:1.5em 1em;
	border:solid 2px var(--R-color);
	padding: 0.5em;
}

._ex-parabox > div {
	border:solid 1px var(--B-color);
}

</style>

<script src="common0.js"></script>
<script src="common1.js" async></script>

<script>

Util.ready = function(){
	const source_data = {
		generate: expand,
	};
	Util.switchWordsInit(source_data);
}

function expand(){
	const class_map = this.class_map;
	const tag_map = this.tag_map;
	const link_map = this.link_map;
	let context_prop = '';

	return this.html.replace(
		/%[\w\-~一-鿆あ-ん]+|`(.*?)([$!@^])(\w*)/g,
		create_html
	);

	function create_html(match, key, indicator, klass){
if(!indicator) {//%
	return `<var>${match.slice(1)}</var>`;
}

let href = '';
let href1 = '';
{
	const n = key.indexOf('＠');
	if(n > 0) {
		href1 = key.slice(n + 1);
		key = key.slice(0, n);
	}
}
let text = key;

switch(klass){
case 'r':
	text = `[${key}]`;
	href = `#biblio-${key.toLowerCase()}`;
	break;
case 't':
	text = `&lt;${key}&gt;`;
	break;
case 'p':
	if( indicator === '@' || indicator === '!') {
		context_prop = `#valdef-${key}-`;
	}
	break;
case 'v': // 文脈依存
	href = context_prop + key;
	break;
case 'en':
	return `<span lang="en">${key}</span>`;
	break;
}

let tag = tag_map[klass];
if(tag) {
	let classname = class_map[klass];
	classname = classname ? ` class="${classname}"` : '';
	text = `<${tag}${classname}>${text}</${tag}>`;
}

if(indicator !== '^'){
	href = href1 || link_map[ klass ? `${klass}.${key}` : key ] || href;
	if(!href){
		console.log(match); // check error
		return match;
	}

	switch(indicator){
	case '!':
	case '$':
		text = `<a href="${href}">${text}</a>`;
		break;
	case '@':
		text = `<dfn id="${href.slice(1)}">${text}</dfn>`;
		break;
	}
}

return text;

	}
}
</script>

<script type="text/plain" id="_source_data">


●●options

spec_date:2025-02-13
trans_update:2023-05-27
	source_checked:231218
page_state_key:CSS
original_url:https://drafts.csswg.org/css2/
	abbr_url:CSS2J
spec_status:ED
site_nav:layout,css
trans_1st_pub:2015-06-07
	trans_1st_pub:2015-06-07
	trans_1st_pub:2015-10-02
	trans_1st_pub:2015-06-09
ref_id_prefix:biblio-
ref_id_lowercase:true
copyright:2025,permissive


●●class_map
p:property
css:css
t:type
e:element
v:value

●●tag_map
p:code
t:var
css:code
c:code
e:code
v:code
V:var
cite:cite

●●original_id_map

anonymous-inline-box:anonymous-inline-boxes
anonymous-inline:anonymous①
block-box:block-boxes①
viewport0:viewport①
containing-block:containing-block①
containing-block-0:containing-block
min-max-replaced-size:
replaced-size:

valdef-display-block:value-def-block
valdef-display-inline-block:value-def-inline-block
valdef-display-inline:value-def-inline
valdef-display-list-item:value-def-list-item
valdef-display-table:value-def-table
valdef-display-inline-table:value-def-inline-table
valdef-display-table-row-group:value-def-table-row-group
valdef-display-table-column:value-def-table-column
valdef-display-table-column-group:value-def-table-column-group
valdef-display-table-header-group:value-def-table-header-group
valdef-display-table-footer-group:value-def-table-footer-group
valdef-display-table-row:value-def-table-row
valdef-display-table-cell:value-def-table-cell
valdef-display-table-caption:value-def-table-caption
	valdef-display-none:valdef-display-none

●●mdn_urls
propdef-clear:CSS/clear
propdef-display:CSS/display
propdef-float:CSS/float
propdef-height:CSS/height
propdef-line-height:CSS/line-height
propdef-max-height:CSS/max-height
propdef-max-width:CSS/max-width
propdef-min-height:CSS/min-height
propdef-min-width:CSS/min-width
propdef-vertical-align:CSS/vertical-align
propdef-width:CSS/width
propdef-z-index:CSS/z-index

●●link_map

	●p
p.clear:#propdef-clear
p.display:#propdef-display
p.float:#propdef-float
p.height:#propdef-height
p.line-height:#propdef-line-height
p.max-height:#propdef-max-height
p.max-width:#propdef-max-width
p.min-height:#propdef-min-height
p.min-width:#propdef-min-width
p.vertical-align:#propdef-vertical-align
p.width:#propdef-width
p.z-index:#propdef-z-index

p.margin:~CSSBOX#propdef-margin
p.margin-bottom:~CSSBOX#propdef-margin-bottom
p.margin-left:~CSSBOX#propdef-margin-left
p.margin-right:~CSSBOX#propdef-margin-right
p.margin-top:~CSSBOX#propdef-margin-top
p.padding-bottom:~CSSBOX#propdef-padding-bottom
p.padding-left:~CSSBOX#propdef-padding-left
p.padding-right:~CSSBOX#propdef-padding-right
p.padding-top:~CSSBOX#propdef-padding-top

p.position:~CSSPOS#propdef-position
p.bottom:~CSSPOS#propdef-bottom
p.left:~CSSPOS#propdef-left
p.right:~CSSPOS#propdef-right
p.top:~CSSPOS#propdef-top
p.text-align:~CSSTEXT#propdef-text-align
p.opacity:~CSSCOLOR#propdef-opacity
p.overflow:~CSSOVERFLOW3#propdef-overflow
p.white-space:~CSSTEXT#propdef-white-space
p.visibility:~CSSDISP#propdef-visibility
p.direction:~CSSWM#propdef-direction
	p.direction:#propdef-direction

p.border-left-width:~CSSBG#propdef-border-left-width
p.border-right-width:~CSSBG#propdef-border-right-width
p.border-top-width:~CSSBG#propdef-border-top-width
p.border-bottom-width:~CSSBG#propdef-border-bottom-width
	p.background:~CSSBG#propdef-background
p.object-fit:~CSSIMAGE#propdef-object-fit


	●用語（margin 相殺
連接して:#adjoining-margins
相殺-:#collapse
相殺され:#collapse
	相殺され:#collapsing-margins
相殺された~margin:#collapsed-margin
挟むように相殺-:#collapse-through

~clearance:#clearance

	●visuren
	●prop

	●値
t.number:~CSSVAL#number-value
t.integer:~CSSVAL#integer-value
t.length:~CSSVAL#length-value
t.percentage:~CSSVAL#percentage-value
t.number:~CSSVAL#number-value

t.table-*:#_typedef-internal-table-display

v.block:#valdef-display-block
v.inline-block:#valdef-display-inline-block
v.inline:#valdef-display-inline
v.list-item:#valdef-display-list-item

	v.block:#valdef-display-block
	v.inline-block:#valdef-display-inline-block
	v.inline:#valdef-display-inline
	v.list-item:#valdef-display-list-item
	v.none:#valdef-display-none
	v.table:#valdef-display-table
	v.inline-table:#valdef-display-inline-table
	v.table-row-group:#valdef-display-table-row-group
	v.table-column:#valdef-display-table-column
	v.table-column-group:#valdef-display-table-column-group
	v.table-header-group:#valdef-display-table-header-group
	v.table-footer-group:#valdef-display-table-footer-group
	v.table-row:#valdef-display-table-row
	v.table-cell:#valdef-display-table-cell
	v.table-caption:#valdef-display-table-caption

v.absolute:~CSSPOS#valdef-position-absolute
v.fixed:~CSSPOS#valdef-position-fixed
v.relative:~CSSPOS#valdef-position-relative
v.static:~CSSPOS#valdef-position-static

	v.none:#valdef-float-none
	v.left:#valdef-float-left
	v.right:#valdef-float-right

	v.none:#valdef-clear-none
	v.left:#valdef-clear-left
	v.right:#valdef-clear-right
	v.both:#valdef-clear-both

	v.auto:#valdef-z-index-auto

	v.none:#_valdef-none
	v.auto
	v.ltr:CSSWM#valdef-direction-ltr
	v.rtl:CSSWM#valdef-direction-rtl
	v.auto:valdef-width-auto
	v.auto:valdef-height-auto
	v.none:valdef-max-width-none
	v.none:valdef-max-height-none


v.normal:#valdef-line-height-normal
v.baseline:#valdef-vertical-align-baseline
v.middle:#valdef-vertical-align-middle
v.sub:#valdef-vertical-align-sub
v.super:#valdef-vertical-align-super
v.text-top:#valdef-vertical-align-text-top
v.text-bottom:#valdef-vertical-align-text-bottom
v.top:#valdef-vertical-align-top
v.bottom:#valdef-vertical-align-bottom

v.visible:~CSSOVERFLOW3#valdef-overflow-visible

v.inline-flex:~CSSDISP#valdef-display-inline-flex
v.flex:~CSSDISP#valdef-display-flex
v.inline-grid:~CSSDISP#valdef-display-inline-grid
v.grid:~CSSDISP#valdef-display-grid

v.ruby-base:~CSSDISP#valdef-display-ruby-base
v.ruby-text:~CSSDISP#valdef-display-ruby-text
v.ruby-base-container:~CSSDISP#valdef-display-ruby-base-container
v.ruby-text-container:~CSSDISP#valdef-display-ruby-text-container


視覚-整形~model:#visual-formatting-model
表示域:#viewport0
	§ 表示域:#viewport
包含塊:#containing-block
初期~包含塊:#initial-containing-block
首要~box:#principal-box
首要:#principal-box

塊~levelの要素:#block-level
塊~level:#block-level-boxes
	塊~level:#block-boxes
	~CSSDISP#block-level
	~CSSDISP#block-level-box
塊~levelの~box:#block-level-boxes
塊~容器:#block-container-box
塊~容器~box:#block-container-box
塊~容器~要素:#block-container-element
	~CSSDISP#block-container
塊~box:#block-box
	塊:~CSSDISP#block

行内~level:#inline-level
行内~levelの~box:#inline-level-boxes
	行内~levelの~box:#anonymous-block-level
行内~levelの要素:#inline-level
	~CSSDISP#inline
	~CSSDISP#inline-level
行内~box:#inline-box
可分な行内:#inline-box
不可分な行内:#atomic-inline-level-boxes
不可分:#atomic-inline
行l~box:#line-box
行内-~table:#valdef-display-inline-table
行内-塊:#valdef-display-inline-block

位置決め~scheme:#positioning-scheme①

~flow:#flow-of-an-element
~flow外:#out-of-flow
~flow内:#in-flow
	~flow内:#positioning-scheme

積層~文脈:#stacking-context
積層-~level:#stack-level

先行する:#_earlier
側方:#_next-to
~clear対象:#_to-be-cleared
~clearanceを持つ:#_has-a-clearance
	~clearanceが導入される:#_has-a-clearance
~clearance:#clearance

浮動体:#float
浮動-:#float
浮動:#float
浮動~box:#float
浮動~要素:#float
	:#floats

通常~flow:#normal-flow
匿名~塊~box:#anonymous
	匿名~行内~text:#anonymous
匿名~行内~box:#anonymous-inline-box
匿名~box:#_anonymous-box

整形~文脈:#formatting-context
塊~整形~文脈:#block-formatting
行内~整形~文脈:#inline-formatting

整列-済み下位tree:#aligned-subtree
支柱:#strut

表示~型:#box-gen
現在の行l~box:#_current-line
現在の行l:#_current-line

	●§
§ ~marginの相殺-法:#collapsing-margins
§ 10.3.3:#blockwidth
§ 10.3.7:#abs-non-replaced-width
§ 10.6.1:#inline-non-replaced
§ 10.6.3:#normal-block
§ 10.6.4:#abs-non-replaced-height
§ 10.6.6:#block-root-margin
§ 横幅と~marginの計算-法:#Computing_widths_and_margins
§ 縦幅と~marginの計算-法:#Computing_heights_and_margins
§ 最小, 最大な縦幅:#min-max-heights
§ 最小, 最大な横幅:#min-max-widths
§ 塊~整形~文脈の根に対する自動~縦幅:#root-height
§ 行間:#leading
§ 置換d要素の~sizing:#replaced-size
§ 各種~boxに対する横幅の計算-法:#_resolving-box-width
§ 各種~boxに対する縦幅の計算-法:#_resolving-box-height

	●用語（CSS
~canvas:~CSScommon#canvas
整形~構造:~CSScommon#formatting-structure
描画される内容:~CSScommon#rendered-content

~table包装~box:~CSS2TABLE#table-wrapper-box
~table~box:~CSS2TABLE#table-box

内容~区画:~CSSBOX#content-area
内容~box:~CSSBOX#content-box
~padding~box:~CSSBOX#padding-box
~margin~box:~CSSBOX#margin-box
~border:~CSSBOX#border
~padding:~CSSBOX#padding
内縁~辺:~CSSBOX#inner-edge
外縁~辺:~CSSBOX#outer-edge
内容~辺:~CSSBOX#content-edge
~margin辺:~CSSBOX#margin-edge
~border辺:~CSSBOX#border-edge
~margin~prop:~CSSBOX#margin-properties

算出d値:~CASCADE#computed-value
使用~値:~CASCADE#used-value
	指定d値:~CASCADE#specified-value
初期~値:~CASCADE#initial-value
適用され:~CASCADE#apply

~x-height:~CSSVAL#ex

生来な寸法:~CSSIMAGE#natural-dimensions
内在的~size:~SIZING#intrinsic-size

連続的~媒体:~MQ5#continuous-media
~paged媒体:~MQ5#paged-media
	~CSS22/media.html#continuous-media-group
	~CSS22/page.html
	媒体:~CSS22/media.html#media

塊-軸:~CSSWM#block-axis
基底線:~CSSWM#baseline

~box~tree:~CSSDISP#box-tree
根~要素:~CSSDISP#root-element
要素~tree:~CSSDISP#element-tree
置換され:~CSSDISP#replaced-element
置換d要素:~CSSDISP#replaced-element

有位置:~CSSPOS#positioned-box
相対~位置決め:~CSSPOS#relative-position
相対的に位置され:~CSSPOS#relative-position
絶対~位置決め:~CSSPOS#absolute-position
絶対的に位置され:~CSSPOS#absolute-position
固定的に位置され:~CSSPOS#fixed-position
~inset~prop:~CSSPOS#inset-properties
	~offset~prop

~overflow:~CSSOVERFLOW3#overflow
表示域に伝播され:~CSSOVERFLOW3#overflow-propagation

~flex~layout:~CSSFLEX#flex-layout
~flex駒:~CSSFLEX#flex-item

空白:~CSSTEXT#white-space
縮約-可能:~CSSTEXT#collapsible-white-space
縮約され:~CSSTEXT#collapsible-white-space
保全d空白:~CSSTEXT#preserved-white-space

内容が収まる~size:~SIZING#fit-content-size
	~shrink-to-fit:#shrink-to-fit-float
~page区画:~CSSPAGE#page-area
	~CSS22/page.html#page-area

可用な最初の~font:~CSSFONT#first-available-font

●●words_table1
_fL:<span class="_fL">←</span>
_fR:<span class="_fR">→</span>

●●words_table

	●名称
	`CSS1$r:CSS 1
	`CSS20$r:CSS 2(1998)
CSS2:CSS 2
CSS3:CSS 3
	CSS3:level 3 of CSS／:CSS level 3

	●幾何
幅広:wide:~
幅狭:narrow:~
幅:width:~
横方向:horizontal::~
縦方向:vertical::~
縦方向の:verticalな::~
右:right::~
左:left::~
右方:rightward::~
左方:leftward::~
上方:upward::~
下方:downward::~
矩形:rectangle:~
矩形な:rectangularな:~

	最も高い:highest
	上側:above
	下側:below
	最も上側:uppermost
	最も下側:lowermost
	横幅 0 の:zero-width／zero width

	●layout
相殺:collapsing::~
相殺-:collapse::~
	相殺-法:collapsing
連接-:adjoin::~
隣接な:adjacentな:隣接する
clear:
clearance:
flex:
浮動-:float::~
浮動体:float::~
浮動:floating::~
右浮動:right-floating::~:右へ浮動する
左浮動:left-floating::~:左へ浮動する
接合-:flush:~
堆積-:stack::~
首要:principal::主要
同行見出し:run-in::~
不可分:atomic::~
可分:non-atomic::~
固定的:fixed::~
縮短-:shrink::~
	収まるよう縮短-:shrink-to-fit
伸張-:stretch:~
縮約-:collapse::~
右横書き:right-to-left::~
	縦書き:vertical::~
分布-:distribute:~
分布:distribution:~
駒:item:::アイテム
封入-:enclose:~
部屋:room:~
側:side:~
脇:side:~
収まる:fitする:~
	内容が収まる:fit-content
押出す:pushする:~
接する:touchする:~
短縮-:shorten:~
ズラす:shiftする:ずらす
ズレる:shiftする:ずれ込む
	寄せられ:shift
中央寄せに:center:~
拡縮-:scale:~
縦横比:ratio:~

	拘束され過ぎ:over-constrained
	置換されない:non-replaced
	有位置でない:non-positioned
	配置し直され:displace
	~flow内:in-flow
	後続する:following
	~~揃う:line up
	横並び:side by side
	突き出して:stick out
	put:置く
	高い:tall
	closest
	piece
	〜を過ぎる所まで:there are no more 〜 present
	合間に挟まれた:intersperse
	最も高い:tallest
	後続の内容は~boxが元から無かったかのように~layoutされる:has no impact on later siblings

	●text組版
行高:line height::~
基底線:baseline::~::ベースライン
em-box:
深さ:depth:~
高さ:height:~
	~~高さ:tall
	十分な高さ:high enough
	十分高い:tall enough
計量:metric:~
	~~計量:measure
ascender::::アセンダ
descender::::ディセンダ
支柱:strut::~
半分:half:~
間隔法:spacing::アキ組
行間:leading:行アキ
	半~行間:half-leading
拡幅-:bleed:~
中点:midpoint:~
x-height:
限界域:bounds:~
下付文字:subscript:下付き文字
上付文字:superscript:上付き文字

	上げる:raise
	離れる:apart
	囲い込む:enclose

	●塗り
塗ng:painting:塗り
塗られ:paintされ:~
多層化-:layer::~
積層-:stack::~
積層:stacking::~
重合する:overlapする:重なり合う
重合して:overlapして:重なり合って
重合した:overlapした:重なり合った
重合しな:overlapしな:重なり合わな
	重なり:-
	上~層に重ねられ:overlay:
遮る:obscureする:覆う
描く:drawする:~
描かれ:drawされ:~
隠され:hideされ:~
透明度:transparency::~
背後:behind:~
切抜き:clipping::切り抜き

	面する:face
	奥から手前:back-to-front
	手前:in front of
	垂直
	直下

	●CSS
装飾:decoration:~
連続的:continuous:~
	連続する:successive
	連続する:consecutive
保全d:preserved:保全
	継承されない:non-inherited
	算出し直す:recompute

	●仕様
句:phrase:~
明確性:clarity:~
最終的:final:~
禁制-:prohibit:~
統制-:govern:~
統制:governance:~
遭遇-:encounter:~
保つ:keepする:~
尊重-:respect:~
略称-:abbreviate:~
必要最小限:minimal:~
仮想の:imaginary:~
本当の:real:~
概ね:roughに:~
取扱いつ:handleし:取り扱いつ
複雑:complicated:~
参照r:refer:参照
最新な:latest:~
誂えれ:tailorでき:あつらえれ
欠如:lack:~

	~~枠内から:confine
	:consideration
	~~表記:expression
	related
	させなく:prevent
	〜で配置されたとき:actual
	-:impact
	~~改める:-
	やりとりする:consult
	何故なら:because
	易く:easier
	小さな:small
	技巧:tricks
	-:relevant
	満たす:satisfies
	potentially
	~~意味するimply
	興味を引く:interesting
	それに伴い:accordingly
	総称され:said
	alternatively
	alternative
	~~公表:release
	なってはならない:may not
	妨げ:inhibit
	~~選択:choosing
	-:illustration
	respective
	一種:subcategory
	meant
	関わる:involved
	対象にしない:consider
	を基準に:with respect to
	視点:point of view
	-:we
	-:say
	次の様になる:look like this
	くだけて言えば:Loosely
	易く:help
	成り立つ:true
	~~導入される:arise
	全面的:entirely
	併用-:used in conjunction
	-:altogether
	said
	refer
	表記:expression
	具体的
	問わず
	用例
	略して
	視点:point of view
	し得る:possible
	仮の:tentativeな
	仮の:hypothetical
	みなし:
	みなす:as if
	該当するもの:applicable
	~~区別:distinction
	解法:solution
	解いて:solving
	~~由来する:inspired
	-:stand for
	-:trying
	基準に／指す:referred
	基準に:refer to
	基準に:with respect to
	-:Recall that
	-:Thirdly
	確からしい:probable
	関わらない:nothing to do with
	利用される:involved
	-:said to be
	-:Tells
	-:chosen
	-:per
	呼ばれる:referred to as
	-:met
	ようになる:lead
	まちまちになる:leads to differently

	●未分類
超過-:exceed:~
差引かれ:deductされ:差し引かれ
双方向-:bidirectional::~
双方向性:bidirectionality::~
右横書き:right-to-left::~
	縦書き:vertical::~
強勢-:emphasize:~
変形n:transformation::変形
生来:natural::~
印刷機:printer::~::プリンタ
点字:braille:~
携帯:handheld:~
聴覚-:aural:~

	後続する:following
	一部を成す:taking part
	付与-:attach
	certain
	次:next
	所属-:belong
	替えられ
	末端
	沿い
	近づく:closer
	最も近い:nearest
	所属-:belong
	空白:white space
	~scroll用の:scrolling
	合計:total:~
	series
	^en:letter-spacing
	現れる:appear する
	-:computing
	変わり／まちまちに:vary
	~text片:chunk
	見えている:viewing
	居る:live
	こともある:sometime
	-:translation
	順に:followed by
	-:heading
	refer
	消え:away
	clear
	-:later
	-:consisting
	なる:become
	come
	Web
	:max
	近づく:closer
	面する:face
	-:lie
	would-be:#1
	-:even with
	少なからず:in part
	またがる:across
	より低い:lower
	より大きい:greater
	より大きい:larger
	より狭い:smaller
	より長い:longer
	より高い:higher
	以前の:previous
	-:original
	周り:around
	次0:next
	種々の:various
	隣に:next-to
	something
	finally
	順々に:one after the other
	他から:elsewhere
	among
	neither
	-:extra
	〜:said 〜
	成すもの:constitute
	に戻る:resumeする
	先行する:preceding
	待っている:pending
	外され:take out
	から:beginning
	nor
	vice versa
	先行する:earlier
	一部を成す:taking part
	-:lowest
	-:past
	最も:least
	上方に:high
	A
	B
	B1
	B2
	C
	C1
	C2
	E
	F
	H
	M1
	M2
	split1
	split2
	どこか:another location
	一致する:anchored at
	~~収まる:fall within
	増やさ:increaseさ
	-:minus
	-:plus
	しばしば／こともある／〜とも:sometime
	ある:certain
	所:place
	-:live
	short
	fix
	-:at this point
	ならば、:this time
	複数回:multiple times
	後に来る:come later
	~~関与:enter into
	構成-:compose
	met
	among
	-:true
	-:breaking
	scroll bar
	min
	max
	-:three
	-:two
	-:get
	-:pick the one of the following six rules
	-:setting
	-:including
	-:rest of
	~GT:greater than
	-:normally
	-:sequence of substitutions
	^v:inline-table

●●ref_data
CSS=副    ~/css-snapshot-ja.html●2025 日本語訳

●●ref_key_map
CSS3COLOR:CSSCOLOR3
MEDIAQ:MEDIAQUERIES4

●●ref_normative

[COLORIMETRY]
    ＜Colorimetry, Fourth Edition. CIE 015:2018＞. 2018. URL: http://www.cie.co.at/publications/colorimetry-4th-edition
[CSS-DISPLAY-4]
    Elika Etemad; Tab Atkins Jr.. ＜CSS Display Module Level 4＞. URL: https://drafts.csswg.org/css-display/
[CSS-LISTS-3]
    Elika Etemad; Tab Atkins Jr.. ＜CSS Lists and Counters Module Level 3＞. URL: https://drafts.csswg.org/css-lists-3/
[CSS-STYLE-ATTR]
    Tantek Çelik; Elika Etemad. ＜CSS Style Attributes＞. URL: https://drafts.csswg.org/css-style-attr/
[CSS-SYNTAX-3]
    Tab Atkins Jr.; Simon Sapin. ＜CSS Syntax Module Level 3＞. URL: https://drafts.csswg.org/css-syntax/
[HTML]
    Anne van Kesteren; et al. ＜HTML Standard＞. Living Standard. URL: https://html.spec.whatwg.org/multipage/
[HTML401]
    Dave Raggett; Arnaud Le Hors; Ian Jacobs. ＜HTML 4.01 Specification＞. 27 March 2018. REC. URL: https://www.w3.org/TR/html401/
[INFRA]
    Anne van Kesteren; Domenic Denicola. ＜Infra Standard＞. Living Standard. URL: https://infra.spec.whatwg.org/
[ISO10646]
    ＜Information Technology - Universal Multiple- Octet Coded CharacterSet (UCS) - Part 1: Architecture and Basic Multilingual Plane.＞ ISO/IEC10646-1:1993. The current specification also takes into consideration the first five amendments to ISO/IEC 10646-1:1993. Useful &lt;a href="http://www.egt.ie/standards/iso10646/ucs-roadmap.html"&gt;roadmaps&lt;/a&gt;show which scripts sit at which numeric ranges.
[ISO8879]
    ＜Information Processing -- Text and Office Systems -- Standard Generalized Markup Language (SGML).＞ ISO 8879:1986. URL: http://www.iso.ch/cate/d16387.html
[MEDIAQUERIES-5]
    Dean Jackson; et al. ＜Media Queries Level 5＞. URL: https://drafts.csswg.org/mediaqueries-5/
[RFC2119]
    S. Bradner. ＜Key words for use in RFCs to Indicate Requirement Levels＞. March 1997. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119
[RFC2318]
    H. Lie; B. Bos; C. Lilley. ＜The text/css Media Type＞. March 1998. Informational. URL: https://www.rfc-editor.org/rfc/rfc2318
[RFC3986]
    T. Berners-Lee; R. Fielding; L. Masinter. ＜Uniform Resource Identifier (URI): Generic Syntax＞. January 2005. Internet Standard. URL: https://www.rfc-editor.org/rfc/rfc3986
[SRGB]
    ＜Multimedia systems and equipment - Colour measurement and management - Part 2-1: Colour management - Default RGB colour space - sRGB＞. URL: https://webstore.iec.ch/publication/6169
[UAAG10]
    Ian Jacobs; Jon Gunderson; Eric Hansen. ＜User Agent Accessibility Guidelines 1.0＞. 17 December 2002. REC. URL: https://www.w3.org/TR/UAAG10/
[UAX9]
    Manish Goregaokar मनीष गोरेगांवकर; Robin Leroy. ＜Unicode Bidirectional Algorithm＞. 2 September 2024. Unicode Standard Annex #9. URL: https://www.unicode.org/reports/tr9/tr9-50.html
[UNICODE]
    ＜The Unicode Standard＞. URL: https://www.unicode.org/versions/latest/
[XML10]
    Tim Bray; et al. ＜Extensible Markup Language (XML) 1.0 (Fifth Edition)＞. 26 November 2008. REC. URL: https://www.w3.org/TR/xml/

●●ref_informative

[BCP47]
    A. Phillips, Ed.; M. Davis, Ed.. ＜Tags for Identifying Languages＞. September 2009. Best Current Practice. URL: https://www.rfc-editor.org/rfc/rfc5646
[CHARSETS]
    ＜Character sets＞. URL: https://www.iana.org/assignments/character-sets
[CSS]
    Chris Lilley; et al. ＜CSS Snapshot 2023＞. URL: https://drafts.csswg.org/css-2023/
[CSS-COLOR-5]
    Chris Lilley; et al. ＜CSS Color Module Level 5＞. URL: https://drafts.csswg.org/css-color-5/
[CSS20]
    Bert Bos; et al. ＜Cascading Style Sheets, level 2 (CSS2) Specification＞. URL: https://www.w3.org/TR/1998/REC-CSS2-19980512/
[CSS21]
    Bert Bos; et al. ＜Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification＞. URL: https://drafts.csswg.org/css2/
[CSS3COLOR]
    Tantek Çelik; Chris Lilley; David Baron. ＜CSS Color Module Level 3＞. URL: https://drafts.csswg.org/css-color-3/
[DOM-LEVEL-3-CORE]
    Arnaud Le Hors; et al. ＜Document Object Model (DOM) Level 3 Core Specification＞. 28 September 2021. REC. URL: https://www.w3.org/TR/DOM-Level-3-Core/
[MATHML3]
    David Carlisle; Patrick D F Ion; Robert R Miner. ＜Mathematical Markup Language (MathML) Version 3.0 2nd Edition＞. 10 April 2014. REC. URL: https://www.w3.org/TR/MathML3/
[MEDIAQ]
    Florian Rivoal; Tab Atkins Jr.. ＜Media Queries Level 4＞. URL: https://drafts.csswg.org/mediaqueries-4/
[P3P]
    Massimo Marchiori. ＜The Platform for Privacy Preferences 1.0 (P3P1.0) Specification＞. 30 August 2018. REC. URL: https://www.w3.org/TR/P3P/
[SELECTORS-3]
    Tantek Çelik; et al. ＜Selectors Level 3＞. URL: https://drafts.csswg.org/selectors-3/
[SVG11]
    Erik Dahlström; et al. ＜Scalable Vector Graphics (SVG) 1.1 (Second Edition)＞. 16 August 2011. REC. URL: https://www.w3.org/TR/SVG11/
[WCAG20]
    Ben Caldwell; et al. ＜Web Content Accessibility Guidelines (WCAG) 2.0＞. 11 December 2008. REC. URL: https://www.w3.org/TR/WCAG20/
[XHTML1]
    Steven Pemberton. ＜XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition)＞. 27 March 2018. REC. URL: https://www.w3.org/TR/xhtml1/
[XML-ID]
    Jonathan Marsh; Daniel Veillard; Norman Walsh. ＜xml:id Version 1.0＞. 9 September 2005. REC. URL: https://www.w3.org/TR/xml-id/
[XML-NAMES]
    Tim Bray; et al. ＜Namespaces in XML 1.0 (Third Edition)＞. 8 December 2009. REC. URL: https://www.w3.org/TR/xml-names/

●●ref_additional
[CSS-BOX-4]
    Elika Etemad. ＜CSS Box Model Module Level 4＞. URL: https://drafts.csswg.org/css-box-4/
[CSS-POSITION-3]
    Elika Etemad; Tab Atkins Jr.. ＜CSS Positioned Layout Module Level 3＞. URL: https://drafts.csswg.org/css-position-3/
[CSS-SIZING-3]
    Tab Atkins Jr.; Elika Etemad. ＜CSS Box Sizing Module Level 3＞. URL: https://drafts.csswg.org/css-sizing-3/
[CSS-WRITING-MODES-4]
    Elika Etemad; Koji Ishii. ＜CSS Writing Modes Level 4＞. URL: https://drafts.csswg.org/css-writing-modes-4/

●●trans_metadata
<p>
~THIS_PAGEは、
~W3Cにより編集者草案として公開された
<a href="~SPEC_URL">CSS Level 2</a>
を成す一部の節を日本語に翻訳したものです。
~PUB
</p>

●●spec_metadata

最新公表バージョン
	https://www.w3.org/TR/CSS2/
公表履歴
	https://www.w3.org/standards/history/CSS21/
	https://www.w3.org/standards/history/CSS22/

フィードバック
	<a href="https://github.com/w3c/csswg-drafts/labels/CSS2">CSSWG Issues Repository</a>

編集
	<a href="https://gsnedders.com">Sam Sneddon</a>
	<a href="mailto:tantek@cs.stanford.edu">Tantek Çelik</a>
前任編集者
	<a href="mailto:bert@w3.org">Editor: Bert Bos</a> (W3C)
	<a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (Apple)
	<a href="mailto:ian@hixie.ch">Ian Hickson</a>
	<a href="mailto:howcome@opera.com">Håkon Wium Lie</a> (Opera Software)

Suggest an Edit for this Spec
	<a href="https://github.com/w3c/csswg-drafts/blob/main/css2/Overview.bs">GitHub Editor</a>
テスト一式
	https://wpt.fyi/results/css/CSS2/
commit 履歴
	https://github.com/w3c/csswg-drafts/commits/main/css2

</script>

</head>
<body>

<header>
	<hgroup>
<h1>Cascading Style Sheets (CSS) Level 2</h1>
	</hgroup>
</header>

<div id="MAIN" hidden>

	<section id="abstract">
◎要約

<p>
この仕様は、
`Cascading Style Sheets level 2 （CSS 2）^cite 改訂 2 （ ~CSS 2.2 ）を定義する。
~CSSは、［
作者や利用者が有構造~文書（例：~HTML文書や~XML応用）に~style（例：~fontや間隔法）を付与する
］ことを許容する~stylesheet言語である。
~CSSは、［
文書の呈示~styleを文書の内容から分離する
］ことにより［
~Webの著作, ~siteの保守
］を単純~化する。
◎
This specification defines Cascading Style Sheets level 2 (CSS 2) revision 2 (CSS 2.2). CSS is a style sheet language that allows authors and users to attach style (e.g., fonts and spacing) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS simplifies Web authoring and site maintenance.
</p>

<p>
~CSSは、
媒体に特有な~stylesheetを~supportする
— 作者が，自身の文書の呈示を［
視覚-~browser,
聴覚-機器,
印刷機,
点字~装置,
携帯~機器,
等々
］に誂えれるよう。
~CSSは、［
内容の位置決め,
~table~layout,
国際-化のための特能,
~UIに関係するいくつかの~prop
］も~supportする。
◎
It supports media-specific style sheets so that authors may tailor the presentation of their documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc. It also supports content positioning, table layout, features for internationalization and some properties related to user interface.
</p>

<p>
`CSS21$r からの変更点は、
`§ 変更点＠~CSSWG/css2/#app-changes$を見よ。
`CSS20$r からの変更点は、
`CSS21$r `§ 変更点＠~TR/2011/REC-CSS21-2011-06-07/changes.html$
を見よ。
`CSS20$r を成す特能のうちいくつかは、
実装の欠如に因り，
`CSS21$r において ~CSS2 からは除去されたことに注意
— それらの特能を参照するよう望む仕様は、
適用-可能な最新な~CSS~moduleを参照するべきである
— `CSS$r を見よ。
◎
See Appendix C: Changes for changes from CSS 2.1, and appendix C of CSS 2.1 for changes from CSS2 (1998). Note that several CSS2 (1998) features were removed from CSS 2 in CSS 2.1 due to lack of implementations; specifications that wish to reference those features should reference the latest applicable CSS module, see [CSS].
</p>

~CSSisaLANG

	</section>
	<section id="_conventions">
<h2>この日本語訳について</h2>

<p>
この訳は、
原文~仕様の一部に限り受持つ
— 特に，現代の各種~CSS~moduleにより取って代わられた部分は、
ほとんどを省略している。
そのため、
この訳の中では定義されない用語のうち一部は，
現代の~CSSによる定義を参照rするよう置換している。
</p>

	</section>
	<section id="sotd">
◎位置付け

<p>
これは、
編集者草案の公な複製です…
【以下、この節の内容は，~SOTD-CSSに移譲。】
</p>

	</section>

<main id="MAIN0">

	<section id="box-model">
<h2 title="Box Model">8. ~box~model</h2>

<p class="trans-note">【
この節を成す
`§ ~marginの相殺-法$ 以外の内容は、
今や
`~CSS~box~model＠~CSSBOX$cite `CSS-BOX-4$r
に包摂されるので，和訳は省略する。
】</p>

		<section id="margin-properties">
<h3 title="Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin'">8.3. ~margin~prop</h3>

			<section id="collapsing-margins">
<h4 title="Collapsing margins">8.3.1. ~marginの相殺-法</h4>

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

<p class="trans-note">【†
すなわち、
~margin区画のみ互いに重なり得る下で，
可能な限り互いの間を詰める。
】</p>

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

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

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

<p id="what-is-adjoining">
２つの~marginが
`連接して@
いる（ `adjoining^en ）とは、
~AND↓ が満たされることをいう：
◎
Two margins are adjoining if and only if:
</p>
<ul>
	<li>
当の~marginを有する両~boxは、
同じ`塊~整形~文脈$に関与していて，次を満たす
⇒
`~flow内$にある`塊~level$である。
◎
both belong to in-flow block-level boxes that participate in the same block formatting context
</li>
	<li>
<p>
両~marginを分離するような［
`行l~box$／`~clearance$／`~padding$／`~border$
］は無い。
◎
no line boxes, no clearance, no padding and no border separate them＼
</p>

<p class="note">注記：
この目的においては
`ある種の縦幅 0 である行l~box＠#phantom-line-box$は、
無視されることに注意
（`§ 9.4.2＠#inline-formatting$を見よ）。
◎
(Note that certain zero-height line boxes (see 9.4.2) are ignored for this purpose.)
</p>
	</li>
	<li>
<p>
両~marginとも，縦方向に隣接な~box辺に属する
— すなわち、
両者は，以下に挙げるいずれかの~pairを成す：
◎
both belong to vertically-adjacent box edges, i.e. form one of the following pairs:
</p>
<ul>
	<li>
~boxの上端~marginと,
~boxの最初の［
`~flow内$にある子
］の上端~margin
◎
top margin of a box and top margin of its first in-flow child
</li>
	<li>
~boxの下端~marginと,
~boxの次の［
`~flow内$にある後続する同胞
］の上端~margin
◎
bottom margin of box and top margin of its next in-flow following sibling
</li>
	<li>
［
`height$p の算出d値が `auto^v である
］ような~boxの下端~marginと,
~boxの最後の［
`~flow内$にある子
］の下端~margin。
◎
bottom margin of a last in-flow child and bottom margin of its parent if the parent has auto computed height
</li>
	<li>
<p>
~AND↓ を満たす~boxの［
上端~marginと下端~margin
］：
</p>
		<ul>
			<li>
新たな塊~整形~文脈を確立しない
</li>
			<li>
`min-height$p の算出d値は 0
</li>
			<li>
`height$p の算出d値は 0 または `auto^v
</li>
			<li>
`~flow内$にある子は無い
</li>
		</ul>
◎
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
</li>
		</ul>
	</li>
</ul>

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

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

<div class="note">
<p>注記：
上の規則は、
次を含意する：
◎
Note the above rules imply that:
</p>
<ul>
	<li>
~boxのうち［
`浮動-$されるもの ／
`絶対的に位置され$るもの ／
`行内-塊$であるもの
］の~marginは、
自身以外の~box（~boxの`~flow内$にある子も含む）の~marginとは`相殺され$ない。
◎
Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
◎
Margins of elements that establish new block formatting contexts (such as floats and elements with overflow other than visible) do not collapse with their in-flow children.
◎
Margins of absolutely positioned boxes do not collapse (not even with their in-flow children).
◎
Margins of inline-block boxes do not collapse (not even with their in-flow children).
</li>
	<li>
新たな塊~整形~文脈を確立する要素
（例：`浮動体$／ `overflow$p が `visible^v 以外をとる要素）
の~marginは、
その`~flow内$にある子~boxの~marginとは`相殺され$ない。
◎
↑</li>
	<li>
［
`~flow内$にある`塊~level$の要素
］の下端~marginと, 要素の次の［
`~flow内$にある`塊~level$の同胞
］の上端~marginとは、
常に`相殺され$る
— その同胞が`~clearance$を持たない限り。
◎
The bottom margin of an in-flow block-level element always collapses with the top margin of its next in-flow block-level sibling, unless that sibling has clearance.
</li>
	<li>
［
`~flow内$にある塊~要素
］の上端~marginと, 要素の最初の［
`~flow内$にある`塊~level$の子
］の上端~marginとは、
要素は［
上端~border, 上端~padding
］を持たない, かつ
子は`~clearance$を持たない
ならば，`相殺され$る。
◎
The top margin of an in-flow block element collapses with its first in-flow block-level child’s top margin if the element has no top border, no top padding, and the child has no clearance.
</li>
	<li>
<p>
`~flow内$にある塊~boxの下端~marginと, その~boxの最後の［
`~flow内$にある`塊~level$の子
］の下端~marginは、
~AND↓ が満たされるならば，`相殺され$る：
◎
The bottom margin of an in-flow block box with a height of auto and a min-height of zero collapses with its last in-flow block-level child’s bottom margin if＼
</p>
		<ul>
			<li>
［
~boxの `height$p は `auto^v
］かつ［
~boxの `min-height$p は 0
］
◎
↑</li>
			<li>
~boxは［
下端~padding, 下端~border
］どちらも持たない
◎
the box has no bottom padding and no bottom border and＼
</li>
			<li>
子の下端~marginと［
`~clearance$を持つもの
］の上端~marginは、
`相殺され$ていない。
◎
the child’s bottom margin does not collapse with a top margin that has clearance.
</li>
		</ul>
	</li>
	<li>
<p>
~boxの［
上端~margin, 下端~margin
］は、
~AND↓ が満たされるならば，`相殺され$る：
</p>
		<ul>
			<li>
`min-height$p 値は 0
</li>
			<li>
~boxは、次のいずれも持たない
⇒＃
上端~border,
下端~border
上端~padding,
下端~padding
</li>
			<li>
~boxの `height$p は
0 または `auto^v 。
</li>
			<li>
~boxは、
`行l~box$を包含しない。
</li>
			<li>
~boxの`~flow内$にある子（もしあれば）すべての~marginは，`相殺され$ている。
</li>
		</ul>
◎
A box’s own margins collapse if the min-height property is zero, and it has neither top or bottom borders nor top or bottom padding, and it has a height of either 0 or auto, and it does not contain a line box, and all of its in-flow children’s margins (if any) collapse.
</li>
</ul>
</div>

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

<p id="collapsed-through">
ある~boxの［
上端~margin, 下端~margin
］が`連接して$いる場合、
他の~marginたちが，そのような~marginを
`挟むように相殺-@
する（ `collapse through^en ）ことも起こり得る。
この場合の~boxの位置は、［
【その~boxを生成した要素と】
`相殺された~margin$を成す他の要素
］との関係性に依存する：
◎
If the top and bottom margins of a box are adjoining, then it is possible for margins to collapse through it. In this case, the position of the element depends on its relationship with the other elements whose margins are being collapsed.
</p>
<ul>
	<li>
［
要素の~margin, 要素の親の上端~margin
］が`相殺され$ている場合、
要素の~boxの上端~border辺は，
親のそれと同じ位置になるものと定義される。
◎
If the element’s margins are collapsed with its parent’s top margin, the top border edge of the box is defined to be the same as the parent’s.
</li>
	<li>
他の場合、
要素の親の~marginのうち，~margin相殺の一部を成すものは、
ないか, または下端~marginのみ，のいずれかになる。
この場合の要素の上端~border辺の位置は、
要素の下端~borderが 0 でなかったとき
【すなわち，要素の上端~marginと下端~marginとが連接してなく，相殺されなかったとき】
と同じになる。
◎
Otherwise, either the element’s parent is not taking part in the margin collapsing, or only the parent’s bottom margin is involved. The position of the element’s top border edge is the same as it would have been if the element had a non-zero bottom border.
</li>
</ul>

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

			</section>
		</section>
	</section>
	<section id="visuren">
<h2 title="Visual formatting model">9. 視覚-整形~model</h2>

		<section id="visual-model-intro">
<h3 title="Introduction to the visual formatting model">9.1. 視覚-整形~model 序論</h3>

<p>
この節と`次~節＠#visudet$では、
`視覚-整形~model@
— ~UAが視覚的な媒体に対し，`要素~tree$【！文書~tree】をどう処理するか —
について述べる。
◎
This chapter and the next describe the visual formatting model: how user agents process the document tree for visual media.
</p>

<p>
視覚-整形~modelの下では、
`要素~tree$【！文書~tree】内の各~要素は，
`~box~model＠~CSSBOX#box-model$に則って 0 個~以上の~boxたちを生成する。
これらの~boxたちの~layoutは、
次により統制される：
◎
In the visual formatting model, each element in the document tree generates zero or more boxes according to the box model. The layout of these boxes is governed by:
</p>

<ul>
	<li>
`~boxの各種~寸法＠~CSSBOX#box-model$と~boxの`表示~型$。
◎
box dimensions and type.
</li>
	<li>
`位置決め~scheme$（`通常~flow$／`浮動体$／`絶対~位置決め$ ）。
◎
positioning scheme (normal flow, float, and absolute positioning).
</li>
	<li>
`要素~tree$【！文書~tree】内の要素どうしの関係性
◎
relationships between elements in the document tree.
</li>
	<li>
外部の情報（例： `表示域$の~size, 画像の`生来な寸法$†, 等々）。
◎
external information (e.g., viewport size, intrinsic dimensions of images, etc.).
</li>
</ul>

<p class="trans-note">【†
生来な寸法（ `natural dimensions^en ）は，
原文では内在的~寸法（ `intrinsic dimensions^en ）と称されるが、
この訳では，現代の~CSS用語に倣うよう改める
（生来な［
横幅／縦幅／縦横比
］についても同様）。
（そのように改称されたわけは、
`CSS-SIZING-3$r の用語 `内在的~size$と紛らわしいことによる。）
】</p>

<p>
この節と`次~節＠#visudet$にて定義される各種~propは、［
`連続的~媒体$, `~paged媒体$
］どちらにも適用される。
しかしながら，各種`~margin~prop$の意味は、
`~paged媒体$に適用されるときには変わる
（詳細は、
`§ ~page~model＠~CSS22/page.html#page-margins$
を見よ）。
◎
The properties defined in this chapter and the next apply to both continuous media and paged media. However, the meanings of the margin properties vary when applied to paged media (see the page model for details).
</p>

<p>
視覚-整形~modelは、
整形のすべての側面までは指定しない
（例： 字詰め（ `letter-spacing^en ）の~algo）。
`適合~UA＠~CSSSNAPSHOT#conformance$は、
この仕様が受持っていない これらの整形の課題に対しては，挙動を違えてもヨイ。
◎
The visual formatting model does not specify all aspects of formatting (e.g., it does not specify a letter-spacing algorithm). Conforming user agents may behave differently for those formatting issues not covered by this specification.
</p>

			<section id="viewport">
<h4 title="The viewport">9.1.1. 表示域</h4>

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

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

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

			</section>
			<section id="containing-block-0">
<h4 title="Containing blocks">9.1.2. 包含塊</h4>

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

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

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

			</section>
		</section>
		<section id="box-gen">
<h3 title="Controlling box generation">9.2. ~box生成の制御-法</h3>

<p>
次の節に、
~CSS2にて生成され得る~boxたちの各種 表示~型について述べる。
~boxの表示~型は、
`視覚-整形~model$における その挙動に少なからず影響する。
後述の `display$p ~propが，~boxの表示~型を指定する。
◎
The following sections describe the types of boxes that may be generated in CSS 2. A box’s type affects, in part, its behavior in the visual formatting model. The display property, described below, specifies a box’s type.
</p>

<p class="trans-note">【
`表示~型＠~CSSDISP#display-type$
（ `display type^en ）という訳語は，
`CSS-DISPLAY-4$r に倣ったもの
— 原文では単に “型” とされている。
】</p>

			<section id="block-boxes">
<h4 title="Block-level elements and block boxes">9.2.1. 塊~levelの要素と塊~box</h4>

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

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

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

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

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

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

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

				<section id="anonymous-block-level">
<h5 title="Anonymous block boxes">9.2.1.1. 匿名~塊~box</h5>

<p>
次の様な文書において：
◎
In a document like this:
</p>

<pre class="lang-html">
&lt;div&gt;
  Some text
  &lt;p&gt;More text
&lt;/div&gt;
</pre>

<p>
`div^e は、
行内~内容と塊~内容の両者を持つように現れる（ `div^e と `p^e の `display$p はいずれも `block^v とする）。
整形をより定義し易くするため、
"Some Text" の周りには，
`匿名~塊~box@
が在るものと見做される。
【それは、`塊~容器$になり, かつ`塊~level$であるとされるので、“`塊~box$” と称される。】
◎
(and assuming the DIV and the P both have 'display: block'), the DIV appears to have both inline content and block content. To make it easier to define the formatting, we assume that there is an anonymous block box around "Some text".
</p>

<figure>
【！anon-block.png 】
<div
	id="anon-block"
>
<div
	class="_box"
>Some text <mark class="_label">（匿名~box）</mark></div>
<div
	class="_box" style="background: gray; margin-top:0.4rem;"
>More text <span class="_label">（ `p^e ~box）</span></div>
</div>
<figcaption>
上の例から生成される 3 個の~box
— 外枠の `div^e ~boxと，その中の`匿名~塊~box$（上段）と `p^e ~box（下段） —
を示す図式。
【！alt="diagram showing the three boxes for the example above"】
◎
Diagram showing the three boxes, of which one is anonymous, for the example above.
</figcaption></figure>

<p>
言い換えれば、
`塊~容器~box$の内側に`塊~levelの~box$（上の `p^e など）が在る場合
（上の `div^e 用に生成されるものなど），
内側には`塊~levelの~box$<em>しかない</em>よう強制される。
◎
In other words: if a block container box (such as that generated for the DIV above) has a block-level box inside it (such as the P above), then we force it to have only block-level boxes inside it.
</p>

<div class="p">
<p>
`行内~box$ %~box が `~flow内$にある`塊~levelの~box$たちが成す “連なり” を包含する場合：
</p>

<ol>
	<li>
%~box （および %~box と同じ`行l~box$に属する %~box の行内~先祖）は， “連なり” の周りで，分断され、
</li>
	<li>
分断された前後それぞれの行l~box群（空, すなわち 0 個の行l~boxにもなり得る）は，`匿名~塊~box$に封入される。
</li>
	<li>
これらの `匿名~塊~box$, および “連なり” は，互いに同胞になる。
【 “連なり” が複数あれば、合間に生じる各~行l~box群も匿名~塊~boxで包装される。】
</li>
</ol>

<p>
ここでの “連なり” とは、［
連続する, または［
`縮約-可能$な`空白$や`~flow外$にある要素
］のみにより分離される
］ような，互いに同胞な 1 個以上の`塊~levelの要素$を意味する。
</p>

<p>
%~box が`相対~位置決め$により~offsetされる場合、
その中の塊~boxたち（匿名なそれも含む）も一緒に~offsetされる。
</p>
◎
When an inline box contains an in-flow block-level box, the inline box (and its inline ancestors within the same line box) is broken around the block-level box (and any block-level siblings that are consecutive or separated only by collapsible whitespace and/or out-of-flow elements), splitting the inline box into two boxes (even if either side is empty), one on each side of the block-level box(es). The line boxes before the break and after the break are enclosed in anonymous block boxes, and the block-level box becomes a sibling of those anonymous boxes. When such an inline box is affected by relative positioning, any resulting translation also affects the block-level box contained in the inline box.
</div>

<div class="example">
<p>
この~modelは、
次の例にも適用されることになる。
次の規則が：
◎
This model would apply in the following example if the following rules:
</p>

<pre class="lang-css">
p    { display: inline }
span { display: block }
</pre>

<p>
次の~HTMLに利用された場合：
◎
were used with this HTML document:
</p>

<pre class="lang-html">
&lt;body&gt;
&lt;p&gt;
<em>`span^c の前にある匿名~text</em>
&lt;span&gt;`span^c の内容&lt;/span&gt;
<em>`span^c の後にある匿名~text</em>
&lt;/p&gt;
&lt;/body&gt;
</pre>

<!-- 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HEAD>
<TITLE>Anonymous text interrupted by a block</TITLE>
</HEAD>
<BODY>
<P>
This is anonymous text before the SPAN.
<SPAN>This is the content of SPAN.</SPAN>
This is anonymous text after the SPAN.
</P>
</BODY>
-->

<div class="p">
<p>
`p^e 要素は（`行内~level$にされてはいるが）、
順に，［
匿名~text片 %C1,
`塊~level$にされた `span^e 要素,
別の匿名~text片 %C2
］を包含する。
結果の~boxたちは、［
次のものを包含している `body^e
］を表現している`塊~box$になる：
</p>

<ol>
	<li>
%C1 を包装する`匿名~塊~box$
</li>
	<li>
`span^e による`塊~box$
</li>
	<li>
%C2 を包装する別の`匿名~塊~box$
</li>
</ol>

◎
The P element contains a chunk (C1) of anonymous text followed by a block-level element followed by another chunk (C2) of anonymous text. The resulting boxes would be a block box representing the BODY, containing an anonymous block box around C1, the SPAN block box, and another anonymous block box around C2.
</div>
</div>

<p>
`匿名~box$の~propは、
それを封入している非~匿名~boxから継承される（例：
この節の最初の例では、
匿名~box "Some text" は，親の `div^e から継承する）。
継承されない~propについては，各自の初期~値にされる。
例えば、
匿名~boxの~fontは `div^e から継承されるが，~marginは 0 になる。
◎
The properties of anonymous boxes are inherited from the enclosing non-anonymous box (e.g., in the example just below the subsection heading "Anonymous block boxes", the one for DIV). Non-inherited properties have their initial value. For example, the font of the anonymous box is inherited from the DIV, but the margins will be 0.
</p>

<p>
［
`匿名~塊~box$を生成させる要素
］上に設定された各~propは、
依然として，それらの~boxと 要素の内容にも適用される。
例えば，上の例で `p^e 要素に~borderが設定されていたなら、
~borderは %C1, %C2 の周りにも描かれることになる
（この~borderは、［
%C1／ %C2
］の行lの［
終端／始端
］では開いた~~状態になる）。
◎
Properties set on elements that cause anonymous block boxes to be generated still apply to the boxes and content of that element. For example, if a border had been set on the P element in the above example, the border would be drawn around C1 (open at the end of the line) and C2 (open at the start of the line).
</p>

<div class="example">
<p>【上の例の，利用中の~browserによる呈示（この訳による追加）：】</p>

<figure><figcaption>
上の例において `p^e に~border（赤線）が設定されているとき
— ~borderは，合間の塊を飛ばして描かれるであろう。
</figcaption>
<div class="_ex-block-in-a-inline">
<span>
`span^c の前にある匿名~text
<span>`span^c の内容</span>
`span^c の後にある匿名~text
</span></div>
</figure>

<figure><figcaption>
一つ前の例で `p^e の `display^p が `block^v であったなら、
~borderは単に `p^e の周囲に描かれるであろう。
</figcaption>
<div class="_ex-block-in-a-inline">
<span style="display:block;">
`span^c の前にある匿名~text
<span>`span^c の内容</span>
`span^c の後にある匿名~text
</span></div>
</figure>

<figure><figcaption>
2 つ前の例から， `span^e の前後の匿名~textを削除したとき
— それでも、
行l~boxは分割の前後に生成されるであろう。
</figcaption>
<div class="_ex-block-in-a-inline">
<span>
<span>`span^c の内容</span>
</span></div>
</figure>

<figure><figcaption>
一つ前の例から、
更に~border~styleも削除したとき
— 行l~boxは（少なくとも見かけ上は）生成されなくなるであろう
（`この挙動の説明＠#phantom-line-box$）。
</figcaption>
<div class="_ex-block-in-a-inline">
<span style="border:none;">
<span>`span^c の内容</span>
</span></div>
</figure>

<figure><figcaption>
一つ前の例に、
`p^e に青い外形線~style（ `outline^p: `blue^v ）を加えたとき
— ~layoutは同じになるべきだが、
見えない行l~boxにも外形線を描く実装はあるかもしれない。
</figcaption>
<div class="_ex-block-in-a-inline">
<span style="border:none; outline: solid var(--B-color) 1px;">
<span>`span^c の内容</span>
</span></div>
</figure>
</div>

<p>
行内~box %~box が包含している塊の~borderを，他の仕方で実装している~UAも中にはある：
例えば、
そのような入子な塊を
“匿名~行l~box”
の内側に包装して、
この匿名~boxの周りに %~box の~borderを描くような。
`CSS1$r, `CSS20$r は，この挙動を定義していないので、
この別の~modelを実装するような［
`CSS1$r ／ `CSS20$r 
］ “のみの” ~UAであっても、
~CSS2のこの部分には適合するものと主張できる。
このことは、
この仕様が~~公表された後に開発された~UAには，適用されない。
◎
Some user agents have implemented borders on inlines containing blocks in other ways, e.g., by wrapping such nested blocks inside "anonymous line boxes" and thus drawing inline borders around such boxes. As CSS1 and CSS2 (1998) did not define this behavior, CSS1-only and CSS2 (1998)-only user agents may implement this alternative model and still claim conformance to this part of CSS 2. This does not apply to UAs developed after this specification was released.
</p>

<p>
`匿名~塊~box$は、
百分率~値を解決する際には，参照rされずに無視される
— 代わりに，先祖の非 `匿名~box$のうち，最も近いものを利用して解決される。
例えば、［
この節の最初の例の `div^e の子である`匿名~塊~box$（ "Some Text" ）
］において，百分率による縦幅を解決する際に，その包含塊の縦幅を知る必要があるならば、
その匿名~塊~boxの縦幅ではなく， `div^e により形成される包含塊の縦幅を利用することになる。
◎
Anonymous block boxes are ignored when resolving percentage values that would refer to it: the closest non-anonymous ancestor box is used instead. For example, if the child of the anonymous block box inside the DIV above needs to know the height of its containing block to resolve a percentage height, then it will use the height of the containing block formed by the DIV, not of the anonymous block box.
</p>

				</section>
			</section>
			<section id="inline-boxes">
<h4 title="Inline-level elements and inline boxes">9.2.2. 行内~levelの要素と行内~box</h4>

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

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

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

<div class="p">
<p>
`行内~levelの~box$は、
次の 2 種に大別される：
</p>

<dl>
	<dt>`行内~box@ 【 “可分な行内” 】</dt>
	<dd>
その内容も，~boxが関与している`行内~整形~文脈$に関与するもの。
`display$p 値が `inline$v にされた`置換され$ない要素は、
`行内~box$を生成する。
</dd>

	<dt>`不可分な行内@</dt>
	<dd>
`行内~box$でないもの
（`行内~level$の`置換d要素$が生成する~box, `行内-塊$, `行内-~table$など）。
その名称の由来は、
それが単独の`不透明な~box＠#_opaque$として`行内~整形~文脈$に関与することによる。
</dd>
</dl>
◎
An inline box is one that is both inline-level and whose contents participate in its containing inline formatting context. A non-replaced element with a display value of inline generates an inline box. Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box.
</div>

				<section id="anonymous-inline">
<h5 title="Anonymous inline boxes">9.2.2.1. 匿名~行内~box</h5>

<p>
（行内~要素の内側ではなく）`塊~容器~要素$の内側に直に包含される，どの~textも、
`匿名~行内~box$を生成するもの【！匿名~行内~要素】として扱うモノトスル。
◎
Any text that is directly contained inside a block container element (not inside an inline element) must be treated as an anonymous inline element.
</p>

<p>
次の様な~HTML~markupを伴う文書において：
◎
In a document with HTML markup like this:
</p>

<div class="example">
<pre class="lang-html">
&lt;p&gt;ある&lt;em&gt;強勢された&lt;/em&gt;テキスト&lt;/p&gt;
</pre>
<!-- 
<p>Some <em>emphasized</em> text</p>
-->
</div>

<p>
`p^e は、
その内側にいくつかの`行内~box$たちを伴う`塊~box$を生成する。
"強勢された" に対する~boxは，行内~要素（ `em^e ）により生成される`行内~box$であるが、
他の~box（ "ある" と "テキスト" ）は，`塊~levelの要素$（ `p^e ）により生成される`行内~box$である。
後者の~boxには、
結付けられる`行内~levelの要素$がないため，
`匿名~行内~box@
と呼ばれる。
◎
the &lt;p&gt; generates a block box, with several inline boxes inside it. The box for "emphasized" is an inline box generated by an inline element (&lt;em&gt;), but the other boxes ("Some" and "text") are inline boxes generated by a block-level element (&lt;p&gt;). The latter are called anonymous inline boxes, because they do not have an associated inline-level element.
</p>

<p>
そのような`匿名~行内~box$は、
その親の塊である~boxから継承-可能な~propを継承する。
継承されない~propは、
初期~値にされる。
上の例では、
`匿名~行内~box$の色は `p^e から継承されるが，背景は透明になる。
◎
Such anonymous inline boxes inherit inheritable properties from their block parent box. Non-inherited properties have their initial value. In the example, the color of the anonymous inline boxes is inherited from the P, but the background is transparent.
</p>

<p>
`空白$のみからなる内容は、
`white-space$p ~propに則って`縮約され$て消える場合には，`匿名~行内~box$を生成しない。
【`関連事項＠#phantom-line-box$】
◎
White space content that would subsequently be collapsed away according to the white-space property does not generate any anonymous inline boxes.
</p>

<p>
この仕様では、
どの`表示~型$の匿名~boxを指すのか文脈から明らかな所では、
`匿名~行内~box$, `匿名~塊~box$
どちらも，単に
`匿名~box@
と記される。
◎
If it is clear from the context which type of anonymous box is meant, both anonymous inline boxes and anonymous block boxes are simply called anonymous boxes in this specification.
</p>

<p>
~tableを整形する際には、
`他の表示~型の匿名~box＠~CSS2TABLE#anonymous-boxes$が~~導入される。
◎
There are more types of anonymous boxes that arise when formatting tables.
</p>

				</section>
			</section>
			<section id="run-in">
<h4 title="Run-in boxes">9.2.3. 同行見出し（ `run-in^en ）~box</h4>

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

			</section>
			<section id="display-prop">
<h4 title="The display property">9.2.4. `display^p ~prop</h4>

◎名 `display@p
◎値
`inline$v
| `block$v
| `list-item$v
| `inline-block$v
| `table$v
| `inline-table$v
| `table-*$t
| `none$v
◎初 `inline$v
◎適 すべての要素
◎継 されない
◎百 受容しない
◎算 ~textを見よ
◎順 文法に従う
◎表終

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

<dl>
	<dt>`block@v</dt>
	<dd>
この値は、
要素に`塊~box$を生成させる。
◎
This value causes an element to generate a block box.
</dd>

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

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

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

	<dt>`none@v</dt>
	<dd>
この値は、
要素が`整形~構造$に現れないようにする
（すなわち，視覚-媒体においては、
要素は，~boxを生成せず, ~layoutに効果を及ぼすこともなくなる）。
要素のどの子孫も，~boxを生成しなくなり、
要素とその内容は，整形~構造から全面的に除去される。
子孫に `display$p ~propを設定しても，
この挙動が上書きされることはない。
◎
This value causes an element to not appear in the formatting structure (i.e., in visual media the element generates no boxes and has no effect on layout). Descendant elements do not generate any boxes either; the element and its content are removed from the formatting structure entirely. This behavior cannot be overridden by setting the display property on the descendants.
</dd>
	<dd>
値 `none$v は、
不可視な~boxを作成するものではないことに注意。
それは、
~boxを まったく作成させなくする。
~CSSには、
要素が［
整形に影響しつつ，それ自身は可視でない【すなわち，透明な】~box
］を`整形~構造$内に生成する仕組みもある。
詳細は、
`§ 可視性＠~CSSDISP#visibility$に諮られたし。
◎
Please note that a display of none does not create an invisible box; it creates no box at all. CSS includes mechanisms that enable an element to generate boxes in the formatting structure that affect formatting but are not visible themselves. Please consult the section on visibility for details.
</dd>

	<dt>`table@v</dt>
	<dt>`inline-table@v</dt>
	<dt>`table-*$t</dt>
	<dd>
これらの値は、
要素を `table^e 要素の様に挙動させる
（`§ ~table＠~CSS2TABLE$ に述べられる制約の~subjectになる）。
◎
These values cause an element to behave like a table element (subject to restrictions described in the chapter on tables).
</dd>
	<dd>
<p>
ここで：
</p>

<pre class="prod">
`table-*@t
	= `table-row-group@v
	| `table-header-group@v
	| `table-footer-group@v
	| `table-row@v
	| `table-column-group@v
	| `table-column@v
	| `table-cell@v
	| `table-caption@v
</pre>

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

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

<p>
算出d値は、
指定d値と同じになる。
ただし，［
`有位置$な要素, `浮動~要素$, `根~要素$
］に対する場合は除く
— <a href="#dis-pos-flo">§ `display^p, `position^p, `float^p の関係性</a>
を見よ。
◎
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.
</p>

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

<p class="trans-note">【†
現代の~HTML（ `HTML$r ）における~UA~stylesheetは、
その `§ 具現化＠~HTMLrendering$
に定義される。
】</p>

<div class="example">
<p>
ここに `display$p ~propの例をいくつか示す：
◎
Here are some examples of the display property:
</p>

<pre class="lang-css">
p   { display: block }
em  { display: inline }
li  { display: list-item } 
img { display: none }      /* <span class="comment">
画像は表示させない
◎
Do not display images
</span> */
</pre>
</div>

			</section>
		</section>
		<section id="positioning-scheme">
<h3 title="Positioning schemes">9.3. 位置決め~scheme</h3>

<p>
~CSS2においては、
~boxは，次の３種の
`位置決め~scheme@
に則って~lay-outし得る：
◎
In CSS 2, a box may be laid out according to three positioning schemes:
</p>

<dl>
	<dt>`通常~flow$</dt>
	<dd>
~CSS2における通常~flowには、
次に挙げるものが含まれる
⇒＃
`塊~levelの~box$の`塊~整形＠#block-formatting$,
`行内~levelの~box$の`行内~整形＠#inline-formatting$,
これらの~boxの`相対~位置決め$
◎
Normal flow. In CSS 2, normal flow includes block formatting of block-level boxes, inline formatting of inline-level boxes, and relative positioning of block-level and inline-level boxes.
</dd>

	<dt>`浮動体$</dt>
	<dd>
<p>
浮動~modelにおいては、
~boxは：
</p>
		<ol>
			<li>
先ず，`通常~flow$に則って~lay-outされてから†
</li>
			<li>
その~flowから外され、
アリな限り，［
左方, 右方
］いずれかへ寄せられる††。
</li>
			<li>
しかる後、
周りの内容は，浮動体の脇に~flowし得るようになる†††。
</li>
		</ol>
<p class="trans-note">【†
すなわち、
`現在の行l$を決定する。
】【††
現在の行lの［
左端／右端
］へ寄せられる。
】【†††
現在の行l 以降に生成される`行l~box$は、
当の浮動体の［
右／左
］に配置される。
】</p>

◎
Floats. In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.
</dd>

	<dt>`絶対~位置決め$</dt>
	<dd>
絶対~位置決め~modelにおいては、
~boxは，`通常~flow$からまるごと除去された上で
（後続の内容は~boxが元から無かったかのように~layoutされる）、
包含塊を基準に位置がアテガわれる。
◎
Absolute positioning. In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.
</dd>
	<dd class="trans-note">【
~CSS2における`絶対~位置決め$に関する内容は、
今や `CSS-POSITION-3$r にて定義されるので，
この訳では（一部を除き）省略する。
】</dd>
</dl>

<p>
［
要素／~box
］のうち，次に挙げるものは
`~flow外@
にあると呼ばれ，他のものは
`~flow内@
にあると呼ばれる
⇒＃
`浮動体$,
`絶対的に位置され$た要素,
`根~要素$
◎
An element is called out of flow if it is floated, absolutely positioned, or is the root element. An element is called in-flow if it is not out-of-flow.＼
</p>

<p>
`~flow@
とは、［
`~flow外$にある，ある要素を根とする下位tree
］から，その中の［
`~flow外$にある要素を根とする下位tree
］すべてを~~除外した部分である。
◎
The flow of an element A is the set consisting of A and all in-flow elements whose nearest out-of-flow ancestor is A.
</p>

<p class="note">注記：
~CSS2の位置決め~schemeは、
~markupによる技巧（例：不可視な画像）を要することなく，~layout効果を得られるようにして、
作者が，より~access可能な文書を書き易くするためにある。
◎
Note. CSS 2’s positioning schemes help authors make their documents more accessible by allowing them to avoid mark-up tricks (e.g., invisible images) used for layout effects.
</p>

			<section id="choose-position">
<h4 title="Choosing a positioning scheme: position property">9.3.1. 位置決め~schemeの~~選択： `position^p ~prop</h4>

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

			</section>
			<section id="position-props">
<h4 title="Box offsets: top, right, bottom, left">9.3.2. ~boxの~offset： `top^p, `right^p, `bottom^p, `left^p</h4>

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

			</section>
		</section>
		<section id="normal-flow">
<h3 title="Normal flow">9.4. 通常~flow</h3> 

<p>
通常~flow（ `normal flow^en ）における~boxは、
塊, 行内いずれかの
`整形~文脈@
（ `formatting context^en ）に所属する【関与する】
— が、
これら 2 つに同時に所属することはない。
`塊~level$の~boxは、
`塊~整形~文脈$に関与する。
`行内~level$の~boxは、
`行内~整形~文脈$に関与する。
◎
Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.
</p>

			<section id="_overview-of-formatting-context">
<h4>9.4.X. 【塊~整形~文脈における各種~boxの~~位置付け】</h4>

<p class="trans-note">【
この節は、
訳者による注釈である。
<!-- 
原文の記述は概ね，ボトムアップ式であり、俯瞰しづらいので。
-->
】</p>

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

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

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

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

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

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

			</section>
			<section id="block-formatting">
<h4 title="Block formatting contexts">9.4.1. 塊~整形~文脈</h4>

<div class="p">
<p>
次のものは、
その内容に対し，新たな`塊~整形~文脈$を確立する：
</p>
<ul>
	<li>
`浮動体$
</li>
	<li>
`絶対的に位置され$た要素
</li>
	<li>
`塊~容器$（ `inline-block^v, `table-cell^v, `table-caption^v など）であって，`塊~box$でないもの
【言い換えれば、塊~整形~文脈でない整形~文脈の中に置かれた塊~容器】
</li>
	<li>
`塊~box$であって，
`overflow$p は `visible^v でないもの（その値が`表示域に伝播され$たものであるときは除く）
</li>
</ul>

◎
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with overflow other than visible (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
</div>

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

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

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

			</section>
			<section id="inline-formatting">
<h4 title="Inline formatting contexts">9.4.2. 行内~整形~文脈</h4>

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

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

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

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

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

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

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

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

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

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

<div class="p">
<p id="phantom-line-box">
`行l~box$は、
`行内~整形~文脈$の中で，`行内~level$の内容を保持する必要に応じて作成される。
次のいずれも包含しないような`行l~box$は…：
</p>
<ul>
	<li>
空でない~text
— `保全d空白$も含め【！~CSS22/text.html#white-space-prop】†
</li>
	<li>
非 0 の【横方向の】††［
~margin, ~padding, ~border
］いずれかを伴う`行内~level$の要素
</li>
	<li>
`~flow内$にある内容（画像, `行内-塊$, `行内-~table$など）
</li>
</ul>

<p>
…は：
</p>
<ul>
	<li>
その内側にある要素†††の位置を決定する目的††††においては、
縦幅 0 の`行l~box$として扱うモノトスル。
</li>
	<li>
他の目的においては、
存在しないものとして扱うモノトスル。
</li>
</ul>

◎
Line boxes are created as needed to hold inline-level content within an inline formatting context. Line boxes that contain no text, no preserved white space, no inline elements with non-zero margins, padding, or borders, and no other in-flow content (such as images, inline blocks or inline tables), and do not end with a preserved newline must be treated as zero-height line boxes for the purposes of determining the positions of any elements inside of them, and must be treated as not existing for any other purpose.
</div>

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

<div class="example">
<p>
`行内~box$の構築~例をここに示す。
（ ~HTML `塊~levelの要素$ `p^e で作成された）次の段落は、
合間に［
`em^e, `strong^e
］要素が挟まれた，匿名~textを包含している：
◎
Here is an example of inline box construction. The following paragraph (created by the HTML block-level element P) contains anonymous text interspersed with the elements EM and STRONG:
</p>

<pre class="lang-html">
&lt;p&gt;いくつかの&lt;em&gt;強勢された単語&lt;/em&gt;が，
&lt;strong&gt;この文の中&lt;/strong&gt;に現れています。&lt;/p&gt;
◎
&lt;p&gt;Several &lt;EM&gt;emphasized words&lt;/EM&gt; appear
&lt;strong&gt;in this&lt;/strong&gt; sentence, dear.&lt;/p&gt;
</pre>

<p>
`p^e 要素は、
`塊~box$を生成する。
それは、
5 個の`行内~box$を包含し，うち 3 つは匿名である：
◎
The P element generates a block box that contains five inline boxes, three of which are anonymous:
</p>

<div>

<ul>
	<li>匿名： "いくつかの"</li>
	<li>`em^e： "強勢された単語"</li>
	<li>匿名： "が，"</li>
	<li>`strong^e： "この文の中"</li>
	<li>匿名： "に現れています。"</li>
</ul>

◎
Anonymous: "Several"
EM: "emphasized words"
Anonymous: "appear"
STRONG: "in this"
Anonymous: "sentence, dear."
</div>
 
<p>
~UAは、
段落を整形するときに，これら 5 ~boxをいくつかの`行l~box$の中へ~flowする。
この例では、
`p^e 要素により生成される~boxが、
これらの`行l~box$用に包含塊を確立する。
この包含塊が，すべての`行内~box$に足るほど幅広であれば、
単独の`行l~box$に収まることになる：
◎
To format the paragraph, the user agent flows the five boxes into line boxes. In this example, the box generated for the P element establishes the containing block for the line boxes. If the containing block is sufficiently wide, all the inline boxes will fit into a single line box:
</p>

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

<p>
そうでなければ、
一部の`行内~box$が分割され、
いくつかの`行l~box$にまたがることになる。
段落は、
例えば次のように分割される：
◎
If not, the inline boxes will be split up and distributed across several line boxes. The previous paragraph might be split as follows:
</p>

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

<p>
あるいは次の様に：
◎
or like this:
</p>

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

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

<div class="example">
<p>
上の例の `em^e 要素に、
次の~styleが適用されたとする：
◎
Consider the following example:
</p>

<pre class="lang-css">
em {
  padding: 2px;
  margin: 1em;
  border: medium dashed;
  line-height: 2.4em;
  background: yellow;
  color: green;
}
</pre>

<p>
`p^e の横幅に依存して、
~boxたちは，例えば次のように分布する：
◎
Depending on the width of the P, the boxes may be distributed as follows:
</p>

<figure>
【！inline-layout.png】
<div style="width:11em; border:solid 0.5em var(--N-color); border-style:none solid;">
いくつかの<em style="padding:2px; margin:1em; border:medium dashed; background:yellow; color:green; line-height: 2.4em;">強勢された単語</em>が，<strong>この文の中</strong>に現れています。

<div style="width:100%; position:relative; color:var(--dim-color); margin-top:1em;">
<div style="position:absolute; left:0;">←</div>
<div style="position:absolute; left:0; right:0; text-align:center; font-size: small;">段落の内縁~横幅</div>
<div style="position:absolute; right:0; top:0">→</div>
　
</div>
</div>

<figcaption>
~margin, ~border, ~paddingの表示に対する，行l分断ngの効果を示す図（利用中の~browserによる呈示）。
◎
Image illustrating the effect of line breaking on the display of margins, borders, and padding.
</figcaption></figure>

<ul>
	<li>
"強勢された単語" は、
2 個の~box［
`前半^V, `後半^V
］に分断され，
`後半^V は次の行lに折り~~返されている。
</li>
	<li>
［
`前半^V を含む行l~box／
`後半^V を含む行l~box
］の縦幅は、
`em^e ~boxによる縦幅（ `line-height^p ） `2.4em^v になる（図では，ちょうど `前半^V の~borderと `後半^V の~borderの下端の間隔に等しくなる）。
</li>
	<li>
~marginは，［
`前半^V の前 ／
`後半^V の後
］に挿入される。
◎
The margin is inserted before "emphasized" and after "words".
</li>
	<li>
~paddingは、
`前半^V の［
前, 上, 下
］および
`後半^V の［
後, 上, 下
］に挿入される。
いずれにせよ、
点線（ `dashed^v ）の~borderは，挙げられた 3 つの側に描画される。
◎
The padding is inserted before, above, and below "emphasized" and after, above, and below "words". A dashed border is rendered on three sides in each case.
</li>
	<li class="trans-note" id="_vertical-effect">【
`可分な行内$に対しては、
縦方向［
~margin／~border／~padding
］は，行l~boxの縦幅に影響しない（次の図）。
】</li>
</ul>

<figure>
<div style="color:var(--dim-color); background:var(--pale-color);">
前に現れる内容は、
後続の~textの背景と~borderで覆われるかもしれない。
</div>
<div style="width:11em; border:solid 0.5em var(--N-color); border-style:none solid;">
いくつかの<em style="padding:1.5em 2px; margin:2em 1em; border:dashed; background:yellow; color:green; border-width:0.5em medium; line-height: 2.4em;">強勢された単語</em>が，<strong>この文の中</strong>に現れています。
</div>

<figcaption>
上の例から，縦方向についてのみ［
~margin, ~border, ~padding
］を増やしたときの，利用中の~browserによる呈示。
</figcaption></figure>
</div>

			</section>
			<section id="relative-positioning">
<h4 title="Relative positioning">9.4.3. 相対~位置決め</h4>

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

			</section>
		</section>
		<section id="floats">
<h3 title="Floats">9.5. 浮動体</h3>

<p>
`浮動体@
（ `float^en
— “浮動された（ `floated^en ）” ／ “浮動（ `floating^en ）”
~boxとも称される）
は、
`現在の行l$において，［
左端, または右端
］へ寄せられる~boxである。
浮動体の最も興味を引く特性は、
その周りの内容が，浮動体の脇に沿って~flowし得るようになることである
（また、
 `clear$p ~propにより，それを禁制することもできる）。
周りの内容は、
左方へ浮動された~boxに対しては，その右~脇から下へ~flowし、
右方へ浮動された~boxに対しては，左~脇から下へ~flowする。
以下は、
浮動体の位置決めと内容~flowの序論である
—
`浮動体の挙動を統制する正確な規則＠#float-rules$は、
`float$p ~propの記述にて与えられる。
◎
A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the clear property). Content flows down the right side of a left-floated box and down the left side of a right-floated box. The following is an introduction to float positioning and content flow; the exact rules governing float behavior are given in the description of the float property.
</p>

<p>
`現在の行l@
とは、
仮に，当の浮動体が “無限小な文字”
— 少なくとも何らかの行l~boxを生成させるような，空な行内~内容 —
で代用されたとき、
それが配置されることになる`行l~box$を意味する（場合によっては縦幅 0 にもなる）
。
ここでの “周りの内容” は、
`現在の行l$, または それ以降の行l~boxに配置される内容を指す。
</p>

<p class="trans-note">【
この定義は、
原文には明示的に述べられていない，この訳による補完
— このように定義されると解釈すれば、
以下の記述も筋が通る。
】</p>

<p>
~box %A が~box %B に
`先行する@
とは、［
%A と %B は同じ`塊~整形~文脈$に関与している
］, かつ［
%A を生成している要素は %B を生成している要素より，~source文書~内で先に現れている
］ことを意味する。
</p>

<p class="trans-note">【
この定義は、
他所を簡潔に述べるための，この訳による追加
（この節の中でしか利用されない）。
】</p>

<p>
浮動された~boxは、
その外縁~辺が［
包含塊の辺, または［
その~boxに`先行する$別の浮動~boxがあるならば，その外縁~辺
］］に接するまで、
左方へまたは右方へ寄せられる。
浮動される~boxの上端 `外縁~辺$は、
`現在の行l$の上端に整列される。
◎
A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there is a line box, the outer top of the floated box is aligned with the top of the current line box.
</p>

<p>
浮動体の脇に~flowされる内容に対し，横方向の部屋が十分でない場合、
内容は［
何らかの内容を収められるようになるか, または
浮動体を過ぎる所
］まで，下方へズレる。
◎
If there is not enough horizontal room for the float, it is shifted downward until either it fits or there are no more floats present.
</p>

<p>
浮動体は`~flow内$にないので、
浮動~boxの
前／後
に作成される，`有位置$でない`塊~box$は、
浮動体が存在しなかったかのように縦方向に~flowする†。
しかしながら、［
浮動体の`側方$に重合する，`現在の行l$ 以降の`行l~box$
］は、
浮動体の~margin~boxが占める部屋に必要yなだけ短縮される。
◎
Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.
</p>

<p class="trans-note">【†
すなわち、
浮動体に後続する塊~boxの位置と~size自体は，浮動体が無かったかのように決定され、
浮動体は，塊~boxの中に入り込むように配置され、
塊~boxの行内~内容は，浮動体の脇に~flowする。
次の例の様に：
】</p>

<div class="example">
<p class="trans-note">【
この例は，この訳による追加。
】</p>

<pre class="lang-html">
&lt;div style="border:solid medium;"&gt;
  &lt;mark style="float:left;"&gt;左へ浮動する内容&lt;/mark&gt;
  &lt;div style="border:solid thin; margin: 0.5em;"&gt;
    浮動体に後続する塊~box内の，行内~内容
  &lt;/div&gt;
&lt;/div&gt;
</pre>

<figure>

<div style="border:solid medium;">
  <mark style="float:left;">左へ浮動する内容</mark>
  <div style="border:solid thin; margin: 0.5em;">
    浮動体に後続する塊~box内の，行内~内容
  </div>
</div>

<figcaption>
利用中の~browserによる，上の~HTMLの実際の呈示。
</figcaption></figure>

<p>
外縁な `div^e の内縁~辺（この例では図を囲っている矩形の内縁）が、
当の塊~box用の包含塊になる。
塊~boxの~border（図の内側にある矩形）は、
浮動体の有無に関わらず，包含塊の横幅のほとんど（~marginを除いた部分）を占めることになる。
`現在の行l$は、
塊~boxの上端~外縁~辺（包含塊の上端）に概念的に存在する，縦幅 0 の行l~boxと見なされる。
<!-- 
空白は、縮約されている。
 -->
</p>
</div>

<p>
浮動体の
`側方@
とは、
浮動体の上端~margin辺から下端~margin辺まで（両端は含まない）を占める，横幅~無限な区画である。
◎
A line box is next to a float when there exists a vertical position that satisfies all of these four conditions: (a) at or below the top of the line box, (b) at or above the bottom of the line box, (c) below the top margin edge of the float, and (d) above the bottom margin edge of the float.
</p>

<p class="trans-note">【
この訳では、
原文による
“側方” （ “`a shortened line box is next to a float^en” ）
の定義を 行l~box以外の対象にも転用できるよう一般化した上で，
この用語を利用する他の定義も 等価な言い回しに変換している。
】</p>

<p class="note">注記：
外縁~縦幅が 0 以下の浮動体に対しては、
その`側方$は空になるので，`行l~box$は短縮されないことになる。
◎
Note: this means that floats with zero outer height or negative outer height do not shorten line boxes.
</p>

<p>
`行l~box$が短縮されるとき，その中に~flowされる内容を包含するには短か過ぎる場合、
`行l~box$は，［
何らかの内容を収められるようになるか, または
浮動体の`側方$を過ぎる所
］まで下方へズレる（それに伴い，その横幅も算出し直される）。
そうでなければ、
浮動~boxが浮動されないとするとき，`現在の行l$に~flowされることになる内容は、
書字方向（ `direction^p ）に関わらず，~boxが浮動する方向の反対~側に~flowし直される。
<!-- 
言い換えれば、浮動体の上端が`現在の行l$の上端に整列するように浮動されるに伴い、
`現在の行l$に~flowされていた行内~levelの~boxは、短縮された行l~boxに収まるならば，［
左~浮動体に対しては その右~脇 ／
右~浮動体に対しては その左~脇
］に移動する。
 -->
◎
If a shortened line box is too small to contain any content, then the line box is shifted downward (and its width recomputed) until either some content fits or there are no more floats present. Any content in the current line before a floated box is reflowed in the same line on the other side of the float. In other words, if inline-level boxes are placed on the line before a left float is encountered that fits in the remaining line box space, the left float is placed on that line, aligned with the top of the line box, and then the inline-level boxes already on the line are moved accordingly to the right of the float (the right being the other side of the left float) and vice versa for rtl and right floats.
</p>

<div id="bfc-next-to-float" class="p">
<p>
次に挙げる要素の~border~boxは、
要素~自身と同じ`塊~整形~文脈$に関与する どの`浮動体$の~margin~boxとも重合してはならない：
</p>

<ul>
	<li>
~table
</li>
	<li>
`塊~level$の`置換d要素$
</li>
	<li>
`通常~flow$にて，新たな`塊~整形~文脈$を確立するような要素（ `overflow$p が `visible^v でない要素など）
</li>
</ul>

<p>
実装は、
これらの要素をそのように配置する際には，必要に応じて 次を行うべきである：
</p>
<ul>
	<li>
要素を，それに`先行する$どの浮動体よりも下に配置する。
</li>
	<li>
ただし、
空間が足りるなら、
要素を それらの浮動体の隣に配置してもヨイ
— その際には要素の~border~boxを `§ 10.3.3$ に定義されるものより幅狭にしてもヨイ。
【浮動体が要素の`~clear対象$である場合、この選択肢はない。】
</li>
</ul>

<p>
~UAが要素をいつ浮動体の`側方$に置くか, あるいは
要素が どの程度 より幅狭になれるかについては、
~CSS2では定義されない。
</p>

◎
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with overflow other than visible) must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS 2 does not define when a UA may put said element next to the float or by how much said element may become narrower.
</div>

<div class="example">
<p>
次の文書~断片において、
包含塊は，その内容を浮動体の`側方$に包含するには幅狭~過ぎるので、
内容は浮動体の下に移動される。
<!-- 
そこでは text-align^p ~propに則って行l~box$内に整列される。
 -->
◎
Example. In the following document fragment, the containing block is too narrow to contain the content next to the float, so the content gets moved to below the floats where it is aligned in the line box according to the text-align property.
</p>

<pre class="lang-css">
p { width: 10em; border: solid; }
mark { float: left; display: block; width: 5em; height: 5em; border: dashed; }
</pre>

...

<pre class="lang-html">
&lt;p&gt;
  &lt;mark&gt;浮動体&lt;/mark&gt;
  Supercalifragilisticexpialidocious
&lt;/p&gt;
</pre>

<p>
この断片は、
次の様になるであろう：
◎
This fragment might look like this:
</p>

<figure>
【！supercal.png】
<div style="width: 10em; border: solid;">
  <mark style="float: left; display: block; width: 5em; height: 5em; border: dashed;">浮動体</mark>
  Supercalifragilisticexpialidocious
</div>
<figcaption>
分断できない内容~片が，浮動体の`側方$に収まり切らないとき、
その下へ~flowし直される効果を示す図。
◎
Image illustrating the effect of an unbreakable piece of content  being reflowed to just after a float which left insufficient room next to it  for the content to fit.
</figcaption></figure>
</div>

<div class="example">
<p class="trans-note">【
この例は，この訳による追加。
】</p>

<pre class="lang-html">
&lt;div style="border:solid; width:20em;"&gt;
  浮動体の現在の行lに配置される行内~内容は、浮動する方向
  &lt;mark style="float:left;"&gt;（左~浮動体）&lt;/mark&gt;
  の反対~側に~flowし直される。
&lt;/div&gt;
</pre>

<p>
文書は左横書きとする。
文書~内で左~浮動体より先に現れる内容であっても，現在の行lに配置される部分は、
浮動体が左へ浮動するに伴い，その右~脇へ移動することになる：
</p>

<figure>

<div style="border:solid; width:20em;">
  浮動体の現在の行lに配置される行内~内容は、浮動する方向
  <mark style="float:left;">（左~浮動体）</mark>
  の反対~側に~flowし直される。
</div>

<figcaption>
利用中の~browserによる，上の~HTMLの実際の呈示。
</figcaption></figure>

<figure>

<div style="border:solid; width:20em;">
  浮動体の現在の行lに配置される行内~内容は、浮動する方向
  <mark style="float:right;">（右~浮動体）</mark>
  の反対~側に~flowし直される。
</div>

<figcaption>
上の例の <mark>左~浮動体</mark> を <mark>右~浮動体</mark>（
<samp class="css">`float$p: `right^v</samp>
）に変えたときの呈示。
</figcaption></figure>
</div>

<p>
複数の浮動体が，同じ行l上で互いに隣接し得る
— この~modelは、
それらの浮動体にも適用される。
◎
Several floats may be adjacent, and this model also applies to adjacent floats in the same line.
</p>

<div class="example">
<p class="trans-note">【
この例は，この訳による追加。
】</p>
<p>
次の行内~levelの内容に対し：
</p>

<figure>
<div
	id="_flow-next-to-sample"
>
い~_fRろは~_fLに~_fLほへ~_fRと~_fLち~_fLり~_fRぬる~_fLを~_fLわ~_fRか~_fLよ~_fRた~_fLれ~_fRそ~_fLつね~_fRな~_fR~_fLら~_fRむ~_fLう~_fLゐ~_fRの~_fLお~_fRく~_fLや~_fL~_fRま~_fLけ~_fRふ~_fLこ~_fRえ~_fLて~_fRあ~_fRさ~_fLき~_fRゆ~_fRめ~_fLみ~_fRしゑ~_fRひも~_fLせ~_fRす
</div></figure>

<p>
文字 “~_fL” は左に浮動させ（ `float$p は `left^v ），文字 “~_fR” は右に浮動させた（ `right^v ）とする。
複数の浮動体が同じ行lに配置され、
同じ行lにて，浮動体の前／後に現れる~textは、
浮動体の反対~側の脇に~flowし直される：
</p>

<figure>
<div
	id="_flow-next-to-floats"
>
い~_fRろは~_fLに~_fLほへ~_fRと~_fLち~_fLり~_fRぬる~_fLを~_fLわ~_fRか~_fLよ~_fRた~_fLれ~_fRそ~_fLつね~_fRな~_fR~_fLら~_fRむ~_fLう~_fLゐ~_fRの~_fLお~_fRく~_fLや~_fL~_fRま~_fLけ~_fRふ~_fLこ~_fRえ~_fLて~_fRあ~_fRさ~_fLき~_fRゆ~_fRめ~_fLみ~_fRしゑ~_fRひも~_fLせ~_fRす
</div>
<figcaption>
利用中の~browserによる呈示。
</figcaption></figure>

<p>
上の例から更に，すべての浮動体に下端~borderを加えて縦幅を増やした場合
— 浮動体は、
`先行する$他の浮動体の`側方$に~~空きがある限り，なるべく上方へ寄せられる：
</p>

<figure>
<div
	id="_flow-next-to-higher-floats"
>
い~_fRろは~_fLに~_fLほへ~_fRと~_fLち~_fLり~_fRぬる~_fLを~_fLわ~_fRか~_fLよ~_fRた~_fLれ~_fRそ~_fLつね~_fRな~_fR~_fLら~_fRむ~_fLう~_fLゐ~_fRの~_fLお~_fRく~_fLや~_fL~_fRま~_fLけ~_fRふ~_fLこ~_fRえ~_fLて~_fRあ~_fRさ~_fLき~_fRゆ~_fRめ~_fLみ~_fRしゑ~_fRひも~_fLせ~_fRす
</div>
<figcaption>
利用中の~browserによる呈示。
</figcaption></figure>

<!-- 
いろはにほへとちりぬるを
わかよたれそつねならむ
うゐのおくやまけふこえて
あさきゆめみしゑひもせす
-->
</div>

<div class="example">
<p>
次の規則は、
<samp>class="icon"</samp>
を伴うすべての `img^e ~boxを左方へ浮動させる（加えて，左端~marginも `0^v に設定する）：
◎
The following rule floats all IMG boxes with class="icon" to the left (and sets the left margin to 0):
</p>

<pre class="lang-css">
img.icon { 
  float: left;
  margin-left: 0;
}
</pre>
</div>

<div class="example">
<p>
次の~HTML~sourceと~stylesheetを考える：
◎
Consider the following HTML source and style sheet:
</p>

<pre class="lang-html">
&lt;body&gt;
  &lt;p&gt;&lt;img src=img.png alt="浮動する画像"&gt;
     これは見本~textであって、...
&lt;/body&gt;
</pre>

<p>
~CSS：
</p>

<pre class="lang-css">
img { float: left }
body, p, img { margin: 2em 1em; }
</pre>

<p>
`img^e ~boxは左方へ浮動される。
後続する内容は、
浮動体の右方に，浮動体の`現在の行l$から開始するように整形される。
浮動体の右方に来る`行l~box$たちは、
浮動体が在ることに因り短縮されるが、
浮動体を過ぎて以降は， “通常の” 横幅（ `p^e 要素により確立される包含塊のそれ）に戻る。
この文書は、
次の様に整形されるであろう：
◎
The IMG box is floated to the left. The content that follows is formatted to the right of the float, starting on the same line as the float. The line boxes to the right of the float are shortened due to the float’s presence, but resume their "normal" width (that of the containing block established by the P element) after the float. This document might be formatted as:
</p>

<figure>
【！floateg.png】
<div
	id="_left-floating-image"
	style="width:23em; height:16em; border:solid thin var(--N-color); border-bottom-style:dashed; overflow:hidden; font-size: 0.8em; line-height:1.5em;">
	<div style="position:relative;">
<div style="position:absolute; width:100%; text-align:center;"
>max( %B, %P )</div>
<div style="position:absolute;left:0; top:4em;">%B %P</div>
<div style="position:absolute;right:0.1em; top:4em;">%P %B</div>
<div style="position:absolute;left:1em; right: 1em; top:0; height:2em; border:thin var(--N-color); border-style:none dashed;"></div>
<div style="position:absolute;left:1em; right: 1em; top:2em; height:20em; border:thin var(--N-color); border-style:none solid;"></div>
	</div>

	<div style="margin:2em 1em;">
		<div style="border:solid thin var(--N-color); border-bottom-style:none; margin:2em 1em;">
<div style="float:left;"
><div style="width:5em; height:5em; border:solid var(--highlight-bg-color); border-width:2em 1em; background:var(--pale-color); text-align:center;">`img^e</div></div>
これは見本~textであって、浮動~要素が，親の中で その
~margin, ~border, ~padding
は尊守しつつ，左／右に移動されることを示す以外の目的はない。
これは見本~textであって、浮動~要素が，親の中で その
~margin, ~border, ~padding
は尊守しつつ，左／右に移動されることを示す以外の目的はない。
<div style="height:10em;"></div>

		</div>
	</div>
</div>
<figcaption>
浮動~boxが，相互作用する様子を示す図。
図の %B, %P は、
順に `body^e, `p^e の~marginを表す。
浮動しない要素の間では，連接する縦方向の~marginが相殺される一方で、
浮動体（ `img^e ）の~margin（図の黄色の枠）は、
他と相殺されない。
◎
Image illustrating how floating boxes interact with margins.
</figcaption></figure>

<p>
~HTMLが次であったとしても、
整形は正確に同じになる：
◎
Formatting would have been exactly the same if the document had been:
</p>

<pre class="lang-html">
&lt;body&gt;
  &lt;p&gt;これは見本~textであって、
  &lt;img src=img.png alt="この画像は浮動体の説明用。"&gt;
           ...
&lt;/body&gt;
</pre>

<!-- This image will illustrate floats -->
<p>
何故なら、
浮動体の左方に来る`現在の行l$上の内容は，浮動体の右~脇から下へ~flowするように配置し直されるので。
◎
because the content to the left of the float is displaced by the float and reflowed down its right side.
</p>
</div>

<p>
`§ ~marginの相殺-法$に言明されたとおり、
浮動~boxの~marginと他の~boxの~marginとが`相殺され$ることは、
決してない。
したがって，この例においては、
`p^e ~boxと, 浮動された `img^e ~boxとの合間の縦方向~marginが`相殺され$ることはない。
◎
As stated in section 8.3.1, the margins of floating boxes never collapse with margins of adjacent boxes. Thus, in the previous example, vertical margins do not collapse between the P box and the floated IMG box.
</p>

<p>
浮動体は、
`通常~flow$の下でも，他の~boxと重合することはある（例：浮動体の`側方$に重合するような 通常~flowに属する~boxがあって，その横方向~marginが負である場合など）。
その際の塗ng順序については、
`積層~文脈$を見よ。
<!-- 
浮動体の内容は、およそ，浮動体が新たな積層~文脈を生成したかのように積層される
— ただし、［
有位置な要素 ／ 真の積層~文脈を作成する要素
］は、浮動体の親の積層~文脈の一部を成す。
そのような場合、浮動体は，［
有位置でない~flow内にある塊の手前, かつ
~flow内$にある行内の背後
］に描画される。
-->
◎
The contents of floats are stacked as if floats generated new stacking contexts, except that any positioned elements and elements that actually create new stacking contexts take part in the float’s parent stacking context. A float can overlap other boxes in the normal flow (e.g., when a normal flow box next to a float has negative margins). When this happens, floats are rendered in front of non-positioned in-flow blocks, but behind in-flow inlines.
</p>

<div class="example">
<p>
`通常~flow$の下で，浮動体が他の要素の~borderと重合する場合に何が起こるかを，次の図に示す：
◎
Here is another illustration, showing what happens when a float overlaps borders of elements in the normal flow.
</p>

<figure>
【！float2p.png】
<div
	style="width:30em; border:dashed 0.1em; font-size:0.8em; line-height:1.5em;"
>
	<div class="_ex-parabox">
		<div>
最初の段落を成す見本~textがこの中に~flowされている。
~sourceのこのあたりには
<div style="float:left;">
	<div style="border:dashed 0.1em; padding:0.7em;">
		<div style="border:solid 2px; width:5em; height:10em; background:var(--pale-color);">
		</div>
	</div>
</div>
浮動する画像がある。
画像は縦に長いので、
この段落より下へ突き出る。
		</div>
	</div>
	<div class="_ex-parabox">
		<div>
ゆえに、
2 番目の段落も影響されることになる。
この中のどの行内~boxも，画像の~marginより内側に侵入することは禁制されているので、
“脇へ押し出される”。
段落の~boxは，依然として矩形であるが、
その~borderと背景は，浮動している画像の背後に隠される。
		</div>
	</div>
</div>
<figcaption>
浮動している画像は、
それに重合する`塊~box$の~border（図の赤線）を遮る。
図の灰色の点線は外縁~辺（~margin辺）, 細い青線が`内縁~辺$（内容~辺）を表す。
◎
Image showing a floating image that overlaps the borders of two paragraphs: the borders are interrupted by the image.
◎
A floating image obscures borders of block boxes it overlaps.
</figcaption></figure>
</div>

<p>
`clear$p ~propを利用して，内容を浮動体の`側方$に~flowさせなくする方法を、
次の例で図解する。
◎
The following example illustrates the use of the clear property to prevent content from flowing next to a float.
</p>

<div class="example">
<p>
上の例に、
次の規則が加えられたとするとき：
◎
Assuming a rule such as this:
</p>

<pre class="lang-css">
p { clear: left }
</pre>

<p>
整形は、
次の様になるであろう：
◎
formatting might look like this:
</p>

<figure>
【！floatclear.png】
【！alt="Image showing a floating image and the effect of 'clear: left' on the two paragraphs.】
<div
	style="width:30em; font-size:0.8em; line-height:1.5em;"
>
<div style="border:dashed 0.1em;">
	<div class="_ex-parabox">
		<div>
最初の段落を成す見本~textがこの中に~flowされている。
~sourceのこのあたりには
<div style="float:left;">
	<div style="border:dashed 0.1em; padding:0.7em;">
		<div style="border:solid 2px; width:5em; height:10em; background:var(--pale-color);">
		</div>
	</div>
</div>
浮動する画像がある。
画像は縦に長いので、この段落より下へ突き出る。
		</div>
	</div>
</div>
<div style="text-align:center; line-height:1.1em; color:gray;"
>↑<br>~clearance<br>↓</div>

<div style="clear:left; border:dashed 0.1em; position:relative; top:-1.6em;">

	<div class="_ex-parabox">
		<div>
この段落は、先行するどの左~浮動体の~margin辺よりも下に来るように，
`clear^p ~propが `left^v に設定されている。
段落の上端~marginの上には`~clearance$が加えられる。
		</div>
	</div>
</div>
</div>
<figcaption>
両~段落とも、
`clear$p は `left^v に設定されることにより、
2 番目の段落は，浮動体の下へ “押出される” 。
この~~効果は、
段落の上端~marginの上に “~clearance” を追加することで成遂げられる
（ `clear$p ~propを見よ）。
◎
Both paragraphs have set 'clear: left', which causes the second paragraph to be "pushed down" to a position below the float — "clearance" is added above its top margin to accomplish this (see the clear property).
</figcaption></figure>
</div>

			<section id="float-position">
<h4 title="Positioning the float: the float property">9.5.1. 浮動体の位置決め： `float^p ~prop</h4>

◎名 `float@p
◎値 `left$v | `right$v | `none$v
◎初 `none^v
◎適
すべての要素
— ただし、
`絶対的に位置され$た要素は除く（注釈文を見よ）。†
◎継 されない
◎百 受容しない
◎算 指定された~keyword
— ただし、
注釈文を見よ。
◎順 文法に従う
◎表終

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

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

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

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

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

	<dt>`none@v</dt>
	<dd>
~boxは浮動されない。
◎
The box is not floated.
</dd>
</dl>

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

<div id="float-rules" class="p">
<p>
浮動体の挙動は、
以下に与える規則で統制されるモノトスル
— 尚，以下の規則においては：
</p>
<ul>
	<li>
他の浮動体も含め，どの~boxも、
規則が対象にする浮動体と同じ`塊~整形~文脈$に関与するものに限るとする。
</li>
	<li>
浮動体の［
上端／右端／下端／左端
］は、
`外縁~辺$を指すとする。
</li>
</ul>

<p class="trans-note">【
原文には明示的に述べられていないが、
以下の規則は，`相対~位置決め$より先に適用される。
】</p>
◎
Here are the precise rules that govern the behavior of floats:
</div>

<ol>
	<li>
<p>
所与の左浮動~box %L に対し
⇒
%L の左端は，
%L の`包含塊$の左端より左に位置しない
</p>
<p>
右浮動~boxについても相似的な規則が課されるとする。
</p>
◎
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.
</li>
	<li>
<p>
所与の左浮動~box %L1, %L2 に対し，
%L1 は %L2 に`先行する$ならば、
~OR↓ が満たされる：
</p>

		<ul>
			<li>
%L1 の右端は，
%L2 の左端より右に位置しない
</li>
			<li>
%L1 の下端は，
%L2 の上端より下に位置しない
</li>
		</ul>
<p>
右浮動~boxについても相似的な規則が課されるとする。
</p>

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

<div class="example">
<pre class="lang-css">
&lt;div style="margin-bottom:1em;"&gt;塊&lt;/div&gt;
&lt;span style="float:left;"&gt;左浮動~box&lt;/span&gt;
&lt;div style="margin-top:1em;"&gt;塊&lt;/div&gt;
</pre>

<figure><div style="width: 20em;">
	<div style="margin-bottom:1em; outline: solid thin var(--R-color);">塊</div>
	<span style="float:left; outline: solid thin var(--R-color);">左浮動~box</span>
	<div style="margin-top:1em; outline: solid thin var(--R-color);">塊</div>
</div></figure>
</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.
</li>
	<li>
所与の浮動~box %F, および
%F に`先行する$［
`塊~box$／`浮動~box$
］ %B に対し
⇒
%F の上端は %B の外縁~上端~辺より上に位置しない
◎
The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.
</li>
	<li id="x38">
所与の浮動~box %F, および［
%F に`先行する$ ある~boxを包含している`行l~box$ %B
］に対し
⇒
%F の上端は %B の上端 より上に位置しない
◎
The outer top of an element’s floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.
</li>
	<li>
<p>
所与の左浮動~box %L に対し，
%L の左端が，包含塊の左端に接していないならば†
⇒
%L の右端は，包含塊の右端より右に位置しない
</p>
<p>
右浮動~boxについても相似的な規則が課されるとする。
</p>
◎
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.
</li>
	<li class="trans-note">【
`clear$p が設定された浮動体に対する
`追加的な拘束＠#_rule-for-float-with-clear$。
】</li>
	<li>
以上による制約の下で、
浮動~boxは アリな限り上方に配置する。
◎
A floating box must be placed as high as possible.
</li>
	<li>
前項も含め，以上による制約の下で、［
左浮動／右浮動
］~boxは アリな限り［
左方／右方
］に配置する。
◎
A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.
</li>
</ol>

<div class="trans-note">

<p>【†
原文では次の様に記されている：
】</p>

<blockquote>
“所与の左浮動~box %L1, %L2 に対し，
%L1 は %L2 に`先行する$, かつ %L2 は %L1 の右にあるならば：
%L2 の右端~外縁~辺は，包含塊の右端~辺より右に位置しない
（くだけて言えば、
可能な限り左方に来ていない左~浮動体は，包含塊の右端を突き出てはならない）”
</blockquote>

<p>
しかしながら、
%L1 の横幅が 0 の場合は，例外とされるべきであろう
（ “くだけて言えば” 以下の部分が正しい挙動とされるべき）。
例えば：
</p>

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

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

<figcaption>
利用中の~browserによる上の~HTMLの呈示。
原文の規則に従うなら、
2 番目の左~浮動体は最初の浮動体（図の赤線）の下端より下に来なければならない。
</figcaption></figure>
</div>

</div>

<p>
ただし，~CSS2においては、
次の様な浮動体 %F の位置は未定義である：
［
%F と同じ`塊~整形~文脈$に属する,
`~flow内$にある負な縦方向~margin
］があって，［
そのような~marginすべてが 0 に設定された
］とするとき、
%F の位置がより上になる。
<!-- 

https://wiki.csswg.org/spec/css2.1 issue229

https://lists.w3.org/Archives/Public/www-style/2010Sep/0149.html
https://lists.w3.org/Archives/Public/www-style/2010Oct/0245.html
-->
◎
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>

<div class="example">
<p>
次の~HTML断片により、
b は右端へ浮動される。
◎
This HTML fragment results in the b floating to the right.
</p>

<pre class="lang-html">
&lt;p&gt;a&lt;span style="float: right"&gt;b&lt;/span&gt;&lt;/p&gt;
</pre>

<p>
`p^e 要素の横幅が十分あれば、
a と b は次の様に横並びにされる：
◎
If the P element’s width is enough, the a and the b will be side by side. It might look like this:
</p>

<figure>
【！float-right.png】
<div style="outline: dashed var(--R-color); width: 15em;line-height: 2em;">
<div style="text-align:left;">a</div>
<div style="text-align:right; margin-top:-2em;">b</div>
</div>
<figcaption>
`p^e が生成する~box（点線）の中で、
左に位置する a と, 浮動して右へ寄せられる b
◎
An a at the left side of a box and a b at the right side
</figcaption></figure>
</div>

			</section>
			<section id="flow-control">
<h4 title="Controlling flow next to floats: the clear property">9.5.2. 浮動体の~~脇への~flowの制御-法： `clear^p ~prop</h4> 

◎名 `clear@p
◎値 `none$v | `left$v | `right$v | `both$v
◎初 `none^v
◎適 `塊~levelの要素$
◎継 されない
◎百 受容しない
◎算 指定された~keyword
◎順 文法に従う
◎表終

<div>
<p>
この~propは、
要素の
`~clear対象@
とされる浮動~boxたちを指示する：
</p>

<ul>
	<li>
浮動しない`塊~levelの要素$に対しては、
次が要求される
⇒
要素が生成する~box（たち）の上端`~border辺$は、［
要素の`~clear対象$である どの浮動体の下端 `外縁~辺$
］よりも上に位置しない。
</li>
	<li>
`浮動~要素$に対しては、
`後述の拘束＠#_rule-for-float-with-clear$を見よ。
</li>
	<li>
他の要素には適用されない
（ただし、
`後述の注記＠#_rule-for-others-with-clear$を見よ）。
</li>
</ul>

<p class="trans-note">【
“`~clear対象$” は、
この訳で新たに導入した用語である。
その理由は、
原文の “clear する” という動詞としての用法を日本語で表現するためには，その目的語
— すなわち，~clear対象 —
に変形した方が都合がよいこと、
および，このように定義した方が本文を簡潔に記述できるからである。
】</p>

◎
This property indicates which sides of an element’s box(es) may not be adjacent to an earlier floating box. The clear property does not consider floats inside the element itself or in other block formatting contexts.
</div>

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

<dl class="switch">
	<dt>`left@v</dt>
	<dd>
要素に`先行する$すべての左浮動~box。
◎
Requires that the top border edge of the box be below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document.
</dd>

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

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

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

<p class="trans-note">【
この節の以下の記述は、
下の例の終わりまで，浮動体でない要素を対象にする。
】</p>

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

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

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

<ul>
	<li>
<p>
挙動 A：
`~clearance$を，次に挙げる 2 つの量の最~大に設定する：
◎
Then the amount of clearance is set to the greater of:
</p>
		<ol>
			<li>
<p>
要素が生成する塊の上端~border辺を［
`~clear対象$の浮動体の下端~外縁~辺のうち，最も下方にある位置
］に配置するために必要yな量。
</p>

<p class="trans-note">【
`~clearance$がこの量で与えられる場合、
塊の上端~marginは，塊の上端~位置に影響しなくなることになる。
】</p>
◎
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.
</li>
			<li>
<p>
塊の上端~border辺を `仮の位置^V に配置するために必要yな量。
</p>

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

◎
The amount necessary to place the top border edge of the block at its hypothetical position.
</li>
		</ol>
	</li>
	<li>
挙動 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.
</li>
</ul>

<p class="note">注記：
いずれの挙動も、
既存の~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.
</p>

<p class="note">注記：
`~clearance$は 0 以下にもなり得る。
◎
Note: The clearance can be negative or zero.
</p>

<div class="example">
【~clearanceの計算例。以下、この例の和訳は省略する。】
</div>

<div class="example">
【~clearanceが負になり得る例。以下、この例の和訳は省略し，次の例に差し替える。】
<p>
次の~HTMLが与えられた下では：
</p>

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

<p>
塊１と塊２の~marginは相殺され，塊１の下端~border辺と塊２の上端~border辺との間隔は、［
塊１の下端~marginと塊２の上端~marginの最~大
］ = `4em^v になる。
浮動体の`現在の行l$の上端は、
塊２の親 `div^e の上端`内縁~辺$（図の点線）に位置する（塊２の~border辺に一致する）：
</p>

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

<figcaption>
利用中の~browserによる上の~HTMLの呈示。
太い線は、
塊１／２の~border。
</figcaption></figure>

<p>
塊２の~styleに `clear$p: `left^v を追加したとする。
その呈示は、
次の様になる：
</p>

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

<figcaption>
塊２に `clear$p: `left^v を追加したときの，利用中の~browserによる呈示
</figcaption></figure>

<p>
~marginは相殺されなくなり、
塊２は浮動体の下に来る。
塊１の~marginが浮動体との間を隔てる結果，浮動体の位置はそのままになるので、
`~clearance$は，挙動 A, B いずれにせよ
( ( 浮動体の縦幅 ) −  ( 塊２の上端~margin ) )
になる。
</p>

<p>
上の~HTMLにて、
今度は，塊１の下端~marginと塊２の上端~marginを入れ替えたとする：
</p>

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

<p>
その呈示は，入れ替える前と同じになるが、
塊２の~styleに `clear$p: `left^v を追加したときの呈示は，
次の様になる：
</p>

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

<figcaption>
`clear$p の効果により，浮動体の位置が変化する図。
</figcaption></figure>

<p>
~marginが相殺されなくなるに伴い、
浮動体の`現在の行l$の位置（図の点線）は，
塊２の上端~borderから塊１の下端~margin辺へ移動する。
浮動体の縦幅が図のように小さければ：
挙動 A の下では、
塊２の位置は そのまま維持されることになる。
挙動 B の下では、
塊２の上端が浮動体の下端に接合され，~~元の位置より上に移動することになる。
</p>
</div>

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

<ul>
	<li>
所与の浮動体 %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').
</li>
</ul>

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

			</section>
		</section>
		<section id="absolute-positioning">
<h3 title="Absolute positioning">9.6. 絶対~位置決め</h3>

<span id="fixed-positioning"></span>
<p class="trans-note">【
この節の内容は、
今や
`CSS-POSITION-3$r `§ 絶対~位置決め＠~CSSPOS#abspos-insets$
に包摂されるので，和訳は省略する。
】</p>

		</section>
		<section id="dis-pos-flo">
<h3 title="Relationships between display, position, and float">9.7. `display^p, `position^p, `float^p の関係性</h3>

<p>
~boxの生成と~layoutに影響する 3 種の~prop
— `display$p, `position$p, `float$p —
は、
次の様に相互作用する【以下における各~propは、当の~boxの それを指す】：
◎
The three properties that affect box generation and layout — display, position, and float — interact as follows:
</p>

<ol>
	<li>
`display!p の指定d値は `none$v ならば
⇒
要素は~boxを生成しないので，［
`position$p, `float$p
］は適用されない。
◎
If display has the value none, then position and float do not apply. In this case, the element generates no box.
</li>
	<li>
他の場合，
`position$p の指定d値は［
`absolute$v ／ `fixed$v
］ならば
⇒
~boxは`絶対的に位置され$る（~boxの位置は，各種`~inset~prop$と~boxの包含塊から決定される）。
`float!p の算出d値は `none$v になり，
`display$p の算出d値は 下の表tに従う。
◎
Otherwise, if position has the value absolute or fixed, the box is absolutely positioned, the computed value of float is none, and display is set according to the table below. The position of the box will be determined by the top, right, bottom and left properties and the box’s containing block.
</li>
	<li>
他の場合，
`float$p の指定d値は `none$v 以外【かつ `float^p は~boxに`適用され$る】ならば
⇒
~boxは浮動され，
`display$p の算出d値は 下の表tに従う。
◎
Otherwise, if float has a value other than none, the box is floated and display is set according to the table below.
</li>
	<li>
他の場合，要素は`根~要素$であるならば
⇒
`display$p の算出d値は 下の表tに従う。
ただし、
`display!p の指定d値が `list-item$v の場合に その算出d値が［
`block$v, `list-item$v
］どちらになるかは、
~CSS2においては未定義である。
◎
Otherwise, if the element is the root element, display is set according to the table below, except that it is undefined in CSS 2 whether a specified value of list-item becomes a computed value of block or list-item.
</li>
	<li>
他の場合
⇒
`display!p ~propの指定d値が，そのまま算出d値になる。
◎
Otherwise, the remaining display property values apply as specified.
</li>
</ol>

<div>
<table><thead>
<tr><th>指定d値
<th>算出d値
<tbody>

<tr><td>`inline-table$v
<td>`table$v

<tr><td>`table-*$t
<td>`block$v

<tr><td>`inline$v
<td>`block$v

<tr><td>`inline-block$v
<td>`block$v

<tr><td>`inline-flex$v†
<td>`flex$v

<tr><td>`inline-grid$v†
<td>`grid$v

<tr><td>`ruby-base$v†
<td>`block$v

<tr><td>`ruby-text$v†
<td>`block$v

<tr><td>`ruby-base-container$v†
<td>`block$v

<tr><td>`ruby-text-container$v†
<td>`block$v

<tr><td>その他
<td>指定d値
</table>

◎
Specified value｜Computed value
inline-table｜table
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block｜block
others｜same as specified 
</div>

<p class="trans-note">【
“†” が付与された行は、
他の各種~CSS~module（~flex~layoutなど）による拡張
— これらは、
この訳による補完であり，
網羅的ではないかもしれない。
】【
参考：
`~box型の自動的な変形n＠~CSSDISP#transformations$
】</p>

		</section>
		<section id="comparison">
<h3 title="Comparison of normal flow, floats, and absolute positioning">9.8. 通常~flow, 浮動体, 絶対~位置決めの比較</h3>

<p class="trans-note">【
この節の和訳は，省略する。
】</p>

		</section>
		<section id="layers">
<h3 title="Layered presentation">9.9. 多層化された呈示</h3>

			<section id="z-index">
<h4 title="Specifying the stack level: the z-index property">9.9.1. 積層-~levelの指定-法： `z-index^p ~prop</h4> 

◎名 `z-index@p
◎値 `auto$v | `integer$t
◎初 `auto^v
◎適 `有位置$な要素
◎継 されない
◎百 受容しない
◎算 指定されたとおり
◎順 文法に従う
◎表終

<p>
`z-index$p ~propは、
要素が生成する`有位置$な~boxに対し，次を指定する：
◎
For a positioned box, the z-index property specifies:
</p>
<ul>
	<li>
~boxが属している`積層~文脈$における，~boxの`積層-~level$。
◎
The stack level of the box in the current stacking context.
</li>
	<li>
~boxは`積層~文脈$を確立するかどうか。
◎
Whether the box establishes a stacking context.
</li>
</ul>

<p>
各種~値の意味は：
◎
Values have the following meanings:
</p>
<dl>
	<dt>`integer$t</dt>
	<dd id="x43">
生成される~boxは、
新たな`積層~文脈$を確立する。
~boxの`積層-~level$は，所与の整数になる。
◎
This integer is the stack level of the generated box in the current stacking context. The box also establishes a new stacking context.
</dd>

	<dt>`auto@v</dt>
	<dd>
生成される~boxの`積層-~level$は， 0 になる。
~boxは、
`根~要素$でない限り，新たな`積層~文脈$を確立しない†。
◎
The stack level of the generated box in the current stacking context is 0. The box does not establish a new stacking context unless it is the root element.
</dd>
	<dd class="trans-note">【†
この~propによる効果としては。
積層~文脈は、
他の要因により確立される場合もある。
】</dd>
</dl>

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

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

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

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

<div class="p">
<p>
どの~boxも，ある一つの
`積層~文脈@
に所属する。
所与の`積層~文脈$に属する，どの`有位置$な~boxも、
整数をとる
`積層-~level@
を持つ
（負にもなり得る）。
それは、
同じ`積層~文脈$に属する他の~boxの`積層-~level$に相対的な， z-位置を与える
— 同じ積層~文脈の中では：
</p>
<ul>
	<li>
~boxたちは、
`積層-~level$がより高いものほど，手前の層に整形される。
</li>
	<li>
`積層-~level$が同じ~boxたちは、
~tree順序に則って，奥から手前にかけて積層される。
</li>
</ul>

◎
Each box belongs to one stacking context. Each positioned box in a given stacking context has an integer stack level, which is its position on the z-axis relative other stack levels within the same stacking context. Boxes with greater stack levels are always formatted in front of boxes with lower stack levels. Boxes may have negative stack levels. Boxes with the same stack level in a stacking context are stacked back-to-front according to document tree order.
</div>

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

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

<ol>
  	<li>
`積層~文脈$を確立している要素の［
背景と~border
］。
◎
the background and borders of the element forming the stacking context.
</li>
	<li>
子`積層~文脈$のうち，`積層-~level$が負なもの（最も負なものが最初）。
◎
the child stacking contexts with negative stack levels (most negative first).
</li>
	<li>
<p>
`有位置$でない子孫たち
— 次の順に塗られる：
◎
↓</p>
		<ol>
			<li>
`~flow内$にある, かつ `行内~level$でないもの。
◎
the in-flow, non-inline-level, non-positioned descendants.
</li>
			<li>
`浮動体$。
（ A ）
◎
the non-positioned floats.
</li>
			<li>
`~flow内$にある, かつ `行内~level$であるもの。
（ B ）
◎
the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
</li>
		</ol>
	</li>
	<li>
［
子`積層~文脈$／`有位置$な子孫
］のうち，`積層-~level$が 0 のもの。
（ C ）
◎
the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
</li>
	<li>
子`積層~文脈$のうち，`積層-~level$が正なもの（最も正なものが最後）。
◎
the child stacking contexts with positive stack levels (least positive first).
</li>
</ol>

<div class="p">
<p>
ただし、
次に挙げる【子~積層~文脈を確立しない】要素は，
要素~自身が新たな`積層~文脈$を生成したかのように塗られる
— その［
`有位置$な子孫, および 子`積層~文脈$
］は、
要素が属する`積層~文脈$の一部を成すことを除いて：
</p>
<ul>
	<li>
`有位置$でない浮動体（ 層 A ）
</li>
	<li>
`行内-~table$／`行内-塊$（層 B ）
【より一般的には、`不可分な行内$。】
</li>
	<li>
`有位置$な, かつ `積層-~level$は 0 の要素（層 C ）
</li>
</ul>

<p class="trans-note">【
すなわち，これらの要素は、
各~要素ごとに，その内容から［
有位置な子孫／積層~文脈を成す下位tree
］は除外した部分が，上の手続きに従って不可分な一枚の層に塗られる
（具体的には、段 1 と段 3 のみ関わる）。
この結果の各~層と, 除外されたものたちが、
要素が属する積層~文脈の下で，上の手続きに従って塗られることになる。
】</p>

◎
Within each stacking context, positioned elements with stack level 0 (in layer 6), non-positioned floats (layer 4), inline blocks (layer 5), and inline tables (layer 5), are painted as if those elements themselves generated new stacking contexts, except that their positioned descendants and any would-be child stacking contexts take part in the current stacking context.
</div>

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

<!-- 
上述の規則は、
実質的に，文書~treeから描画~treeを構築するための規則を与えている。
組み替えの規則には、
他にも絶対的に位置された要素に関するものがある。
 -->

<div class="example">
<p class="trans-note">【
この例は，この訳による追加。
】</p>

<p>
塗ng順序が適用されるのは、
`要素~tree$【！文書~tree】から`~box~tree$に組み替えられた後になる。
次の様な~HTMLがあるとき：
</p>

<pre class="lang-html">
&lt;div style="<mark>z-index:-1</mark>"&gt;
  &lt;div style="<mark>position:fixed; z-index:1</mark>; ..."
  &gt;固定的に位置された内容&lt;/div&gt;
&lt;/div&gt;
</pre>

<p>
`固定的に位置され$た要素は，
`~box~tree$においては根の直下に移動されるので、
この~HTMLの “固定的に位置された内容” は，
親 `div^e の`積層-~level$を問わず，［
`根~要素$が確立する積層~文脈の中で，積層-~levelが 0 になるもの
］より手前に塗られることになる。
</p>
</div>

<div class="example">
<p>
次の例では、
（ "id" 属性で命名された）各~boxの`積層-~level$は，［
"text2" は 0,
"image" は 1,
"text3" は 2,
"text1" は 3
］になる。
"text2" の`積層-~level$は、
根~boxから継承される。
他のものは `z-index$p ~propで指定されている。
◎
In the following example, the stack levels of the boxes (named with their "id" attributes) are: "text2"=0, "image"=1, "text3"=2, and "text1"=3. The "text2" stack level is inherited from the root box. The others are specified with the z-index property.
</p>

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

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

    &lt;div id="text2"&gt;
      <span class="comment">
この~textは、
一番~奥の層に来る
◎
This text will be beneath everything.
</span>
    &lt;/div&gt;

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

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

			</section>
		</section>
		<section id="direction">
<h3 title="Text direction: the direction and unicode-bidi properties">9.10 ~text方向： `direction^p, `unicode-bidi^p ~prop</h3>

<p>
双方向-~textを~supportしない`適合~UA＠~CSSSNAPSHOT#conformance$は、
この節にて述べる［
`direction^p, `unicode-bidi^p
］~propを無視してもヨイ。
この例外には、［
単に、
~systemの~fontが~supportするがため，右横書き文字を描画し得る
］が，右横書き~text方向の概念は~supportしない~UAも含まれる。
◎
Conforming user agents that do not support bidirectional text may ignore the direction and unicode-bidi properties described in this section. This exception includes UAs that render right-to-left characters simply because a font on the system contains them but do not support the concept of right-to-left text direction.
</p>

<p class="trans-note">【
以下，この節の内容は、
今や
`CSS-WRITING-MODES-4$r `§ 行内~方向と双方向性＠~CSSWM#text-direction$,
<a href="~CSSWM#direction">§ `direction^p ~prop</a>,
<a href="~CSSWM#unicode-bidi">§ `unicode-bidi^p ~prop</a>
に包摂されるので，和訳は省略する
（ ~CSS2では、
縦書きは~supportされない）。
】</p>

		</section>
	</section>
	<section id="visudet">
<h2 title="Visual formatting model details">10. 視覚-整形~modelの詳細</h2>

		<section id="containing-block-details">
<h3 title="Definition of &quot;containing block&quot;">10.1. 包含塊の定義</h3>

<p>
要素が生成する~box（たち）の位置と~sizeは、
要素の
`包含塊@
と呼ばれる，ある矩形に相対的に計算されることもある
（ `§ 包含塊＠#containing-block-0$を見よ）。
それは、
以下に従って定義される：
◎
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:
</p>

<ul>
	<li>
`根~要素$の包含塊は、
`初期~包含塊@
と呼ばれる矩形になる。
それは、
`連続的~媒体$用には，［
`表示域$の寸法と同じ, かつ
その原点が`~canvas$の原点に一致する矩形
］になり、
`~paged媒体$用には，`~page区画$になる。
初期~包含塊の `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.
</li>
	<li>
他の場合、
要素は`絶対的に位置され$るならば
（すなわち，要素の `position$p は `fixed^v ／ `absolute^v ）
⇒
【 `CSS-POSITION-3$r `§ 有位置な~boxの包含塊＠~CSSPOS#def-cb$ にて定義される（なので、この訳では省略する）。】
◎
↓</li>
	<li>
他の場合の包含塊は、
要素に最も近い［
`塊~容器$である先祖~box
］の`内容~辺$で形成される。
【~CSS2においては。より一般には，要素が関与する整形~文脈により定義される。】
◎
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.
◎
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.
◎
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:
◎
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.
◎
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.
</li>
</ul>

<p>
`~paged媒体$においては、
`絶対的に位置され$た要素は
【…以下，この箇所の内容は `CSS-POSITION-3$r `§ 絶対的に位置された要素の断片化-法＠~CSSPOS#abspos-breaking$ に述べられているので、この訳では省略する。】
◎
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.
◎
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, printers may place the content
• on another location on the current page,
• on a subsequent page, or
• may omit it.
◎
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.
</p>

<div class="example">
<p>
次の文書における各~要素の包含塊は、
それらが`有位置$でないならば：
◎
With no positioning, the containing blocks (C.B.) in the following document:
</p>

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

<!-- 
Illustration of containing blocks
This is text in the first paragraph...
This is text in the second paragraph.
-->

<p>
次に従って確立される：
◎
are established as follows:
</p>

<table class="cb-example-table"><thead>
<tr><th>
~boxを生成する要素
◎
For box generated by
<th>
要素の包含塊を確立するもの
◎
C.B. is established by
<tbody>

<tr><td>`html^e
<td>
初期~包含塊
◎
initial C.B. (UA-dependent)
<tr><td>`body^s
<td>`html^e
<tr><td>`div1^s
<td>`body^s
<tr><td>`p1^s
<td>`div1^s
<tr><td>`p2^s
<td>`div1^s
<tr><td>`em1^s
<td>`p2^s
<tr><td>`strong1^s
<td>`p2^s
</table>

<p>
初期~包含塊は、
~UAに依存する。
</p>

<p>
`div1^s を次のように`有位置$にした場合：
◎
If we position "div1":
</p>

<pre class="lang-css">
#div1 { position: absolute; left: 50px; top: 50px }
</pre>

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

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

<pre class="lang-css">
#div1 { position: absolute; left: 50px; top: 50px }
#em1  { position: absolute; left: 100px; top: 100px }
</pre>

<p>
包含塊の表tは、
次のようになる：
◎
the table of containing blocks becomes:
</p>

<table class="cb-example-table"><thead>
<tr><th>
~boxを生成する要素
◎
For box generated by
<th>
要素の包含塊を確立するもの
◎
C.B. is established by
<tbody>

<tr><td>`html^e
<td>
初期~包含塊
◎
initial C.B.
<tr><td>`body^s
<td>`html^e
<tr><td>`div1^s
<td>
初期~包含塊
◎
initial C.B.
<tr><td>`p1^s
<td>`div1^s
<tr><td>`p2^s
<td>`div1^s
<tr><td>`em1^s
<td>`div1^s
<tr><td>`strong1^s
<td>`em1^s
</table>

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

		</section>
		<section id="the-width-property">
<h3 title="Content width: the width property">10.2. 内容~横幅： `width^p ~prop</h3>

◎名 `width@p
◎値
`length$t | `percentage$t | `auto^v
◎初 `auto^v
◎適
すべての要素
— ただし，［
`行内~box$†, `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
◎算
長さは絶対~化される／
他は指定されたとおり
◎
the percentage or auto as specified or the absolute length
◎順 文法に従う
◎表終

<p class="trans-note">【†
原文には “置換されない行内~要素（ `non-replaced inline element^en ）” と記されているが、
この “行内” は（`行内~level$ではなく）`行内~box$を意味しており，`不可分な行内$（`行内-塊$など）は含まれないので、
より明確に（他の各種~CSS仕様に倣って） “行内~box（を生成する要素）” と記すことにする
— この~pageに現れる，他のすべての “置換されない行内~要素” も含め。
】</p>

<p>
この~propは、
~boxの内容~横幅（`内容~区画$の横幅）を指定する。
◎
This property specifies the content width of boxes.
</p>

<p>
この~propは、
`行内~box$を生成する要素には適用されない。
そのような~boxの内容~横幅は、
その中に`描画される内容$のそれになる（子が相対的に~offsetされる<em>前</em>の）。
行内~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.
</p>

<p>
各種 値の意味は：
◎
Values have the following meanings:
</p>

<dl>
	<dt>`length$t</dt>
	<dd>
単位~付きの長さを利用して`内容~区画$の横幅を指定する。
◎
Specifies the width of the content area using a length unit.
</dd>

	<dt>`percentage$t</dt>
	<dd>
百分率による横幅を指定する。
百分率は、
生成される~boxの`包含塊$の横幅を基準に計算される。
包含塊の横幅が 要素の横幅に依存する場合の 結果の~layoutは、
~CSS2においては定義されない。
◎
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.＼
</dd>
	<dd class="note">注記：
包含塊が塊~容器~要素に基づくような`絶対的に位置され$た要素に対しては、
百分率は，その要素の`~padding~box$の横幅を基準に計算される。
これは、
百分率による横幅が 常に親~要素の`内容~box$を基準に計算されていた `CSS1$r からの変更である。
◎
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.
</dd>

	<dt>`auto^v</dt>
	<dd>
横幅は、
他の~propの値に依存する。
以下の各~節を見よ。
◎
The width depends on the values of other properties. See the sections below.
</dd>
</dl>

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

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

<pre class="lang-css">
p { width: 100px }
</pre>
</div>

		</section>
		<section id="Computing_widths_and_margins">
<h3 title="Calculating widths and margins">10.3. 横幅と~marginの計算-法</h3>

<p>
~layoutに利用される要素の［
`width$p,
`margin-left$p,
`margin-right$p,
`left$p,
`right$p
］~propの値は、
互いに依存し，生成される~boxの種別にも依存する
（~layoutに利用される値は、
`使用~値$とも呼ばれる）。
原則的には、
使用~値は，算出d値の［
`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.
</p>

<p class="note">注記：
以下に計算される `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.
</p>

<p>
以下の各~節では、
関連な各種~propの値を次の記号で表す：
</p>

<ul>
	<li>%W = `width$p</li>
	<li>%mL = `margin-left$p</li>
	<li>%mR = `margin-right$p</li>
</ul>

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

<p class="trans-note">【
原文には，`有位置$な要素の［
`left$p ／ `right$p
］の使用~値の計算-法も含まれているが、
今や `CSS-POSITION-3$r にて定義されるので，和訳は省略する
（これらは、
他の要素には適用されない）。
】</p>

			<section id="_resolving-box-width">
<h4>10.3.X. 各種~boxに対する横幅の計算-法</h4>

<p class="trans-note">【
この訳では、
各種~boxに対する横幅の計算-法を，この節の中で一括して与える。
】</p>

<ol>
	<li>
先ず，`置換d要素$に対しては、
不定な %W を
`§ 置換d要素の~sizing$
に従って解決した上で、
以下を適用する。
</li>
	<li>
`絶対的に位置され$た要素に対しては、
`§ 10.3.7$
に従うとする。
</li>
	<li>
<p>
他の要素に対しては：
</p>
		<dl class="switch">
			<dt>
通常~flow内にある`行内~level$の要素
【！原文 § 10.3.1, § 10.3.2, § 10.3.9, § 10.3.10】
</dt>
			<dt>
`浮動体$
【！原文 § 10.3.5, § 10.3.6】
</dt>
			<dd>
<p>
不定な %W は：
</p>
				<ul>
					<li>
`行内~box$に対しては、
`width$p は適用されないので，計算されない。
</li>
					<li>
他（`行内-塊$, `浮動体$）に対しては、
`内容が収まる~size$†
（ “ `shrink-to-fit^en（収まるよう縮短した）” ~size）
に解決する。
【†ここでは、 `CSS-SIZING-3$r の用語を利用して，原文の記述を省略する。】
【！~layoutの目的においては、`内在的~size$が計算される。】
</li>
				</ul>
			</dd>
			<dd>
不定な［
%mL ／ %mR
］は、
0 に解決する。
</dd>

			<dt>
通常~flow内にある`塊~level$の要素
</dt>
			<dd>
`§ 10.3.3$
にて与えられる。
</dd>
		</dl>
	</li>
</ol>

			</section>
			<section id="inline-width">
<h4 title="Inline, non-replaced elements">10.3.1. 行内~boxを生成する要素</h4>

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

			</section>
			<section id="inline-replaced-width">
<h4 title="Inline, replaced elements">10.3.2. 行内~levelの置換d要素</h4>

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

			</section>
			<section id="blockwidth">
<h4 title="Block-level, non-replaced elements in normal flow">10.3.3. 通常~flow内にある塊~levelの置換されない要素</h4>

<div class="p">
<p>
結果の %mL, %W, %mR は、
次の等式を満たすように解決するモノトスル
⇒
%mL ~PLUS %W ~PLUS %mR = `包含塊$の横幅 ~MINUS %pb
</p>

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

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

		<dl class="switch">
			<dt>
%mL, %mR ともに不定でない
（この事例は “拘束され過ぎ” ）：
</dt>
			<dd>
<p>
包含塊の `direction$p ~propに応じて：
</p>
				<ul>
					<li>
`ltr^v ならば：
%mR を不定とみなして， %mR について等式を解いて解決する。
</li>
					<li>
`rtl^v ならば：
%mL を不定とみなして， %mL について等式を解いて解決する。
</li>
				</ul>
◎
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.
</dd>
			<dt>%mL, %mR の片方だけ不定：</dt>
			<dd>
その不定な片方について等式を解いて解決する。
◎
If there is exactly one value specified as auto, its used value follows from the equality.
</dd>
			<dt>%mL, %mR ともに不定：</dt>
			<dd>
%mL, %mR について， %mL = %mR の下で等式を解いて解決する。
これは、
`包含塊$の左右の辺を基準に要素を横方向に中央寄せにする。
◎
↓↓</dd>
		</dl>
	</dd>

	<dt>%W は不定：</dt>
	<dd>
不定な［
%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.
</dd>
</dl>

<p class="trans-note">【
見通しを良くするため、
この節では，原文による場合分けを一部 組み替えている。
】</p>

			</section>
			<section id="block-replaced-width">
<h4 title="Block-level, replaced elements in normal flow">10.3.4. 通常~flow内にある塊~levelの置換d要素</h4>

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

			</section>
			<section id="float-width">
<h4 title="Floating, non-replaced elements">10.3.5. 浮動している置換されない要素</h4>

<p>
`§ 各種~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).
</p>

			</section>
			<section id="float-replaced-width">
<h4 title="Floating, replaced elements">10.3.6. 浮動している置換d要素</h4>

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

			</section>
			<section  id="abs-non-replaced-width">
<h4 title="Absolutely positioned, non-replaced elements">10.3.7. 絶対的に位置された置換されない要素</h4>

<p class="trans-note">【
この節の内容は、
`CSS-POSITION-3$r の`対応する節＠~CSSPOS#abs-non-replaced-width$
に移譲。
】</p>

			</section>
			<section  id="abs-replaced-width">
<h4 title="Absolutely positioned, replaced elements">10.3.8. 絶対的に位置された置換d要素</h4>

<p class="trans-note">【
この節の内容は、
`CSS-POSITION-3$r の`対応する節＠~CSSPOS#abs-replaced-width$
に移譲。
】</p>

			</section>
			<section id="inlineblock-width">
<h4 title="inline-block, non-replaced elements in normal flow">10.3.9. 通常~flow内にある置換されない行内-塊~要素</h4>

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

			</section>
			<section id="inlineblock-replaced-width">
<h4 title="inline-block, replaced elements in normal flow">10.3.10. 通常~flow内にある行内-塊~置換d要素</h4>

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

			</section>
		</section>
		<section id="replaced-size">
<h4>10.X. 置換d要素の~sizing</h4>

<p class="trans-note">【
この節（この訳による追加）は、
原文の各所に散らばる類似な記述を集約して整理したものである。
】</p>

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

<ul>
	<li>
［
%nW ／ %nH ／ %nA
］は、
置換d要素の生来な［
横幅／縦幅／縦横比
］【`生来な寸法$】
— 縦横比は［
横幅 ~DIV 縦幅
］を表すとする。
</li>
	<li>
表tの中の［
%W ／ %H
］列の “？” は，それが不定であることを表し、
“定” は確定的であることを表す。
</li>
	<li>
同様に，［
%nW ／ %nH ／ %nA
］列の “？” は，置換d要素がそれを持たない（不定である）ことを表し、
“定” は持つことを表す。
置換d要素がこれらのうち 2 つを持つならば、
残る 1 つも持つことになる
（その 2 つから，自動的に導出される）。
</li>
</ul>

<table><thead>
<tr><th>%W
<th>%H
<th>%nW
<th>%nH
<th>%nA
<th>結果の %W
<th>結果の %H
<tbody>

<tr><td>定
<td>？
<td>定
<td>定
<td>定
<td>%W
<td>%W ~DIV %nA

<tr><td>定
<td>？
<td>？
<td>？
<td>定
<td>%W
<td>%W ~DIV %nA

<tr><td>定
<td>？
<td>？
<td>定
<td>？
<td>%W
<td>%nH

<tr><td>定
<td>？
<td>定
<td>？
<td>？
<td>%W
<td>150px

<tr><td>定
<td>？
<td>？
<td>？
<td>？
<td>%W
<td>150px

<tr><td>？
<td>定
<td>定
<td>定
<td>定
<td>%H ~MUL %nA
<td>%H

<tr><td>？
<td>定
<td>？
<td>？
<td>定
<td>%H ~MUL %nA
<td>%H

<tr><td>？
<td>定
<td>？
<td>定
<td>？
<td>300px
<td>%H

<tr><td>？
<td>定
<td>定
<td>？
<td>？
<td>%nW
<td>%H

<tr><td>？
<td>定
<td>？
<td>？
<td>？
<td>300px
<td>%H

<tr><td>？
<td>？
<td>定
<td>定
<td>定
<td>%nW
<td>%nH

<tr><td>？
<td>？
<td>？
<td>？
<td>定
<td>%X
<td>%X ~DIV %nA
<tr><td>？
<td>？
<td>？
<td>定
<td>？
<td>300px
<td>%nH

<tr><td>？
<td>？
<td>定
<td>？
<td>？
<td>%nW
<td>150px

<tr><td>？
<td>？
<td>？
<td>？
<td>？
<td>300px
<td>150px
</table>

<p class="trans-note">【
いずれにせよ、
生来な縦横比が不定でないならば，それを保つことが趣旨にある
（しかしながら， %W, %H ともに不定でない場合、
この節は適用されず，生来な縦横比も無視されることになる）。
】</p>

<p>
ここで：
</p>

<ul>
	<li>
<p>
%X は、［
`包含塊$の横幅が，置換d要素の横幅に依存しない
］ならば，
`§ 10.3.3$ に利用される等式による拘束の下で計算される。
他の場合は 300px。
</p>

<p>
~CSS2においては、
行内~levelの置換d要素に対する %X は未定義とするが，同様に計算することが示唆される。
</p>
	</li>
	<li>
結果の［
%W／%H
］に対する値［
“300px” ／ “150px”
］は、
実際には，［
横幅 : 縦幅 = 2 : 1
］の矩形が［
機器に可用な~size, および
300px × 150px の矩形
］の両者に収まるような，最大な~sizeの［
横幅／縦幅
］を表す。
</li>
</ul>

		</section>
		<section id="min-max-widths">
<h3 title="Minimum and maximum widths: min-width and max-width">10.4. 最小, 最大な横幅： `min-width^p, `max-width^p</h3>

◎名 `min-width@p
◎値
`length$t | `percentage$t
◎初 `0^v
◎適
すべての要素
— ただし，［
`行内~box$, `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
◎算 
長さは絶対~化される／
他は指定されたとおり
◎
the percentage as specified or the absolute length
◎順 文法に従う
◎表終

◎名 `max-width@p
◎値
`length$t | `percentage$t | `none^v
◎初 `none^v
◎適 `min-width$p と同じ
◎継 同上
◎百 同上
◎算 同上
◎順 文法に従う
◎表終

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

<dl>
	<dt>`length$t</dt>
	<dd>
固定的な
最小／最大
使用~横幅を指定する。
◎
Specifies a fixed minimum or maximum used width.
</dd>

	<dt>`percentage$t</dt>
	<dd>
使用~値を決定するための百分率を指定する。
百分率は、
生成される~boxの`包含塊$の横幅を基準に計算される。
包含塊の横幅が負である場合、
使用~値は 0 になる。
包含塊の横幅が，要素の横幅に依存する場合の結果の~layoutは、
~CSS2においては定義されない。
◎
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.
</dd>

	<dt>`none^v</dt>
	<dd>
（この値は `max-width$p のみとり得る。）
~boxの横幅を制限しない。
◎
(Only on max-width) No limit on the width of the box.
</dd>
</dl>

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

<p>
~CSS2においては、［
`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.
</p>

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

<ol>
	<li>
先ず、
`§ 横幅と~marginの計算-法$
に従って，仮の使用~横幅 %W を計算する。
◎
The tentative used width is calculated (without min-width and max-width) following the rules under "Calculating widths and margins" above.
</li>
	<li>
［
%W ~GT `max-width$p の算出d値 %maxW
］ならば、
`width$p の算出d値に %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.
</li>
	<li>
［
結果の横幅 %W ~LT `min-width$p の算出d値 %minW
］ならば、
`width$p の算出d値に %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.
</li>
</ol>

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

<p>
ただし、
生来な縦横比を伴う置換d要素のうち［
`width$p, `height$p
］とも算出d値は `auto^v になるものに対しては、
以下に与える~algoで決定される：
◎
However, for replaced elements with an intrinsic ratio and both width and height specified as auto, the algorithm is as follows:
</p>

			<section id="min-max-replaced-size">
<h4>縦横比を伴う~size不定の置換d要素に対する最大, 最小~sizeの適用-法</h4>

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

<ol>
	<li>
<div class="p">
<p>
まず、
利用される値を定義する：
</p>
		<ul>
			<li>
( %W, %H ) ~LET `§ 置換d要素の~sizing$ に従って得られる “仮の” ( 横幅, 縦幅 )
</li>
			<li>
%nA ~LET %W ~DIV %H（ = 生来な縦横比）
</li>
			<li>
%minW ~LET `min-width$p の算出d値
</li>
			<li>
%maxW ~LET max( %minW, `max-width$p の算出d値 ) †
</li>
			<li>
%minH ~LET `min-height$p の算出d値
</li>
			<li>
%maxH ~LET max( %minH, `max-height$p の算出d値 ) †
</li>
		</ul>

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

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

<p>
結果の使用~値は、
次の式で与えられる：
</p>
		<ul>
			<li>
横幅（ `width$p ） = max(%X, %minW)
</li>
			<li>
縦幅（ `height$p  ） = max(%X ~DIV %nA, %minH)
</li>
			<li>
%X = min( %maxW, %maxH ~MUL %nA, max( %W, %minW, %minH ~MUL %nA ) )
</li>
		</ul>

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

◎
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.
</div>

<p class="note">注記：
`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.
</p>
	</li>
	<li>
［
`width$p ／ `height$p
］に対する この新たな使用~値を算出d値とみなす下で，［
`§ 横幅と~marginの計算-法$ ／
`§ 縦幅と~marginの計算-法$
］を適用して、
不定な~marginを解決する。
◎
Then apply the rules under "Calculating widths and margins" above, as if width were computed as this value.
</li>
</ol>

			</section>
		</section>
		<section id="the-height-property">
<h3 title="Content height: the height property">10.5. 内容~縦幅： `height^p ~prop</h3>

◎名 `height@p
◎値
`length$t | `percentage$t | `auto^v
◎初 `auto^v
◎適
すべての要素
— ただし，［
`行内~box$, `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 &lt;percentage&gt;) or the absolute length
◎順 文法に従う
◎表終

<p>
この~propは、
~boxの内容~縦幅（`内容~区画$の縦幅）を指定する。
◎
This property specifies the content height of boxes.
</p>

<p>
この~propは、
`行内~box$には適用されない。
代わりに利用される規則については、
`§ 10.6.1$
を見よ。
◎
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.
</p>

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

<dl>
	<dt>`length$t</dt>
	<dd>
長さ値を利用して`内容~区画$の縦幅を指定する。
◎
Specifies the height of the content area using a length value.
</dd>

	<dt>`percentage$t</dt>
	<dd>
百分率による縦幅を指定する。
百分率は、
生成される~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.＼
</dd>
	<dd class="note">注記：
包含塊が塊~levelの要素に基づくような`絶対的に位置され$た要素に対しては、
百分率は，その要素の`~padding~box$の縦幅を基準に計算される。
これは、
百分率による縦幅が常に親~要素の`内容~box$を基準に計算されていた `CSS1$r からの変更である。
◎
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.
</dd>

	<dt>`auto^v</dt>
	<dd>
縦幅は、
他の~propの値に依存する。
以下の各~節【！下の注釈文】を見よ。
◎
The height depends on the values of other properties. See the prose below.
</dd>
</dl>

<p class="note">注記：
`絶対的に位置され$た要素の包含塊の縦幅は，要素~自身の~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.
</p>

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

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

<pre class="lang-css">
p { height: 100px }
</pre>

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

		</section>
		<section id="Computing_heights_and_margins">
<h3 title="Calculating heights and margins">10.6. 縦幅と~marginの計算-法</h3>

<p>
以下の各~節では、
関連な各種~propの値を次の記号で表す：
</p>

<ul>
	<li>%H = `height$p</li>
	<li>%mT = `margin-top$p</li>
	<li>%mB = `margin-bottom$p</li>
</ul>

<p>
これらの値は、
初期時には，各~propの算出d値に設定されているとする。
この節の目的は、
これらのうち，
<dfn>不定な</dfn>
値 `auto^v をとるものを
<dfn>解決して</dfn>
使用~値を得ることである（拘束され過ぎになる場合も取扱いつつ）。
◎
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.
</p>

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

<p class="note">注記：
以下で計算される `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.
</p>

<p class="trans-note">【
原文には，`有位置$な要素の［
`top$p ／ `bottom$p
］の使用~値の計算-法も含まれているが、
今や `CSS-POSITION-3$r にて定義されるので，和訳は省略する
（これらは、
他の要素には適用されない）。
】</p>

			<section id="_resolving-box-height">
<h4>10.6.X. 各種~boxに対する縦幅の計算-法</h4>

<p class="trans-note">【
この訳では、
各種~boxに対する縦幅の計算-法を，この節の中で一括して与える。
】</p>

<ol>
	<li>
先ず，`置換d要素$に対しては、
不定な %H を
`§ 置換d要素の~sizing$
に従って解決した上で、
以下を適用する。
</li>
	<li>
`絶対的に位置され$た要素に対しては、
`§ 10.6.4$
にて与えられる。
</li>
	<li>
<p>
他の要素に対しては：
</p>
		<ol>
			<li>
不定な［
%mT ／ %mB
］は
⇒＃
`行内~box$に対しては、縦方向~marginは適用されないので計算されない ／
他の要素に対しては、 0 に解決する
</li>
			<li>
<p>
不定な %H については、
次の状況を判別する必要がある
（置換d要素については最初の段で解決-済みなので、
この段は関わらない）：
</p>

<dl class="switch">
	<dt>新たな`塊~整形~文脈$を確立する要素</dt>
	<dd>
<p>
`§ 塊~整形~文脈の根に対する自動~縦幅$
にて与えられる。
次に挙げるもの（のうち，他の整形~文脈を確立しないもの）が該当する：
</p>
		<ul>
			<li>
通常~flow内にある`塊~level$の要素であって
`overflow$p の算出d値が `visible$v でないもの
— (A) ただし、
`overflow$p ~prop値が`表示域に伝播され$ているものは除く。
</li>
			<li>
`行内-塊$
</li>
			<li>
`浮動体$
</li>
		</ul>
<p>
行内~levelの要素に対しては、
それを包含する行l~boxの縦幅を計算するときには，要素の`~margin~box$が利用される。
</p>
	</dd>

	<dt>新たな整形~文脈を確立しない，行内~levelの要素（通常~flow内に`行内~box$を生成するもの）</dt>
	<dd>
`§ 10.6.1$
にて与えられる。
</dd>

	<dt>新たな整形~文脈を確立しない，塊~levelの要素</dt>
	<dt>`行内~整形~文脈$を確立する~boxを生成する，塊~levelの要素</dt>
	<dd>
`§ 10.6.3$
にて与えられる
— 上の (A) で~~除外されたものも，ここに含まれる。
</dd>

	<dt>他の整形~文脈を確立する要素</dt>
	<dd>
その整形~文脈の規則に従う
— この文書では定義されない。
~CSS2においては、
`~table~box$が該当する。
</dd>
</dl>
			</li>
		</ol>
	</li>
</ol>

			</section>
			<section id="inline-non-replaced">
<h4 title="Inline, non-replaced elements">10.6.1. 行内~boxを生成する要素</h4>

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

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

<p>
`行内~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.
</p>

<p id="multi-font-inline-height">
複数の~fontが利用される場合
（利用される~glyphが，他と異なる~font内に見出されたときに起こる）
の`内容~区画$の縦幅は、
この仕様では定義されない。
しかしながら，縦幅は、
`内容~区画$が，要素~内容に利用される<em>すべての</em>~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.
</p>

			</section>
			<section id="inline-replaced-height">
<h4 title="Inline replaced elements, block-level replaced elements in normal flow, inline-block replaced elements in normal flow and floating replaced elements">10.6.2. 通常~flow内にある［行内~level／塊~level／行内-塊］置換d要素／浮動している置換d要素</h4>

<p>
`§ 各種~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.
</p>
			</section>
			<section id="normal-block">
<h4 title="Block-level non-replaced elements in normal flow when overflow computes to visible">10.6.3. 通常~flow内にある塊~levelの置換されない要素</h4>

<p>
`§ 各種~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:
</p>

<p>
不定な %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:
</p>

<ol>
	<li>
%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
</li>
	<li>
<p>
%box の子に`~flow内$にあるものがある場合、
そのような子のうち最後のものを %E とするとき：
</p>
		<ol>
			<li>
%E の下端~margin %m と, %box の下端~marginとが`相殺され$ない場合
⇒
%m の`~margin辺$（ %m は，場合によっては他と`相殺され$る）
</li>
			<li>
%box の上端~marginと下端~marginとが`相殺され$ない場合
⇒
%E の下端`~border辺$
</li>
		</ol>
◎
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
</li>
	<li>
上に該当するものが無い場合
⇒
%H は 0 に解決する
◎
zero, otherwise
</li>
</ol>

<p>
通常~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.
</p>

			</section>
			<section id="abs-non-replaced-height">
<h4 title="Absolutely positioned, non-replaced elements">10.6.4. 絶対的に位置された置換されない要素</h4>

<p class="trans-note">【
この節の内容は、
`CSS-POSITION-3$r の`対応する節＠~CSSPOS#abs-non-replaced-height$
に移譲。
】</p>

			</section>
			<section id="abs-replaced-height">
<h4 title="Absolutely positioned, replaced elements">10.6.5. 絶対的に位置された置換d要素</h4>

<p class="trans-note">【
この節の内容は、
`CSS-POSITION-3$r の`対応する節＠~CSSPOS#abs-replaced-height$
に移譲。
】</p>

			</section>
			<section id="block-root-margin">
<h4 title="Complicated cases">10.6.6. 複雑な事例</h4>

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

			</section>
			<section id="root-height">
<h4 title="auto heights for block formatting context roots">10.6.7. 塊~整形~文脈の根に対する `auto^v 縦幅</h4>

<p>
`塊~整形~文脈$を確立する要素に対する不定な %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:
</p>

<dl class="switch">
	<dt>
要素は`行内~level$の子のみを持つ場合【すなわち，塊~levelの子を持たない】
◎
If it only has inline-level children,＼
</dt>
	<dd>
縦幅は、［
最も上端にある行l~boxの上端から, 最も下端にある行l~boxの下端まで
］の距離
◎
the height is the distance between the top of the topmost line box and the bottom of the bottommost line box.
</dd>

	<dt>
要素は`塊~level$の子を持つ場合
【すなわち，行内~levelの子は匿名な塊~levelの~boxで包装される】
◎
If it has block-level children,＼
</dt>
	<dd>
縦幅は、
塊~levelの子~boxの`~margin辺$のうち［
最も上端にある上端~margin辺から,
最も下端にある下端~margin辺まで
］の距離
◎
the height is the distance between the top margin-edge of the topmost block-level child box and the bottom margin-edge of the bottommost block-level child box.
</dd>
</dl>

<p>
`絶対的に位置され$た子は 無視され、
`相対的に位置され$た~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.
</p>

<div class="p">
<p>
加えて， ~AND↓ を満たす要素の子孫がある場合、
縦幅は，それらの`~margin辺$を含むように増やされる：
</p>
<ul>
	<li>
`浮動体$である
</li>
	<li>
下端`~margin辺$は要素の下端`内容~辺$の下に来る
</li>
	<li>
この`塊~整形~文脈$に関与する
</li>
</ul>

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

◎
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.
</div>

			</section>
		</section>
		<section id="min-max-heights">
<h3 title="Minimum and maximum heights: min-height and max-height">10.7. 最小, 最大な縦幅： `min-height^p, `max-height^p</h3>

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

◎名 `min-height@p
◎値
`length$t | `percentage$t
◎初 `0^v
◎適
すべての要素
— ただし，［
`行内~box$, `table-column^v, `table-column-group^v
］は除く。
◎
all elements but non-replaced inline elements, table columns, and column groups
◎継 されない
◎百 注釈文を見よ
◎算 
百分率は指定されたとおり／
長さは絶対~化される
◎
the percentage as specified or the absolute length
◎順 文法に従う
◎表終

◎名 `max-height@p
◎値
`length$t | `percentage$t | `none^v
◎初 `none^v
◎適 `min-height$p と同じ
◎継 同上
◎百 同上
◎算 同上
◎順 文法に従う
◎表終

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

<dl>
	<dt>`length$t</dt>
	<dd>
固定的な最小／最大~算出d縦幅を指定する。
◎
Specifies a fixed minimum or maximum computed height.
</dd>

	<dt>`percentage$t</dt>
	<dd>
使用~値を決定するときの百分率を指定する。
百分率は、
生成される~boxの`包含塊$の縦幅を基準に計算される。
要素の包含塊の縦幅が明示的に指定されていない
（すなわち、包含塊の内容~縦幅に依存する）, かつ
要素が`絶対的に位置され$ていない場合の百分率~値は
`min-height$p に対しては `0^v ／
`max-height$p に対しては `none^v
］に扱われる。
【算出d値がこの値とされるわけではなく、以下に述べる縦幅に対する拘束を無にすると見られる。】
◎
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).
</dd>

	<dt>`none^v</dt>
	<dd>
（ `max-height$p のみがとり得る）
~boxの縦幅は制限されない。
◎
(Only on max-height) No limit on the height of the box.
</dd>
</dl>

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

<p>
~CSS2においては、［
`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.
</p>

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

<ol>
	<li>
先ず、
`§ 縦幅と~marginの計算-法$
に従って，仮の使用~縦幅 %H を計算する。
◎
The tentative used height is calculated (without min-height and max-height) following the rules under "Calculating heights and margins" above.
</li>
	<li>
［
%H ~GT `max-height$p の算出d値 %maxH
］ならば、
`height$p の算出d値に %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.
</li>
	<li>
［
結果の縦幅 %H ~LT `min-height$p の算出d値 %minH
］ならば、
`height$p の算出d値に %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.
</li>
</ol>

<p class="note">注記：
この手続きは、
上の各~propの本当の算出d値には影響しない。
`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).
</p>

<p>
ただし，生来な縦横比を伴う置換d要素のうち［
`width$p, `height$p
］とも算出d値は `auto^v になるものに対しては、
`§ 縦横比を伴う~size不定の置換d要素に対する最大, 最小~size＠#min-max-replaced-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.
</p>

		</section>
		<section id="line-height">
<h3 title="Line height calculations: the line-height and vertical-align properties">10.8. 行高の計算： `line-height^p, `vertical-align^p ~prop</h3>

<p>
§ `行内~整形~文脈$にて述べたように、
~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:
</p>

<ol>
	<li>
行l~box内の行内~levelの~boxの縦幅は：
［
`置換d要素$／
`行内-塊$／
`inline-table^v
］に対しては、
その`~margin~box$の縦幅になる。
行内~boxに対しては、
その `line-height$p になる
（`§ 縦幅と~marginの計算-法$, `§ 行間$の`行内~boxの縦幅＠#inline-box-height$を見よ。）
◎
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".)
</li>
	<li>
行内~levelの~boxたちは、
`vertical-align$p ~propに則って縦方向に整列される。
それらが［
`top$v ／ `bottom$v
］に整列される場合、
行高（~boxたちが属する行l~boxの縦幅）を最小~化するように整列するモノトスル。
そのような~boxたちが十分高い場合、
複数の解法があり得る
— ~CSS2は、
行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).
</li>
	<li>
行高は、【同じ行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.)
</li>
</ol>

<p>
空な行内~要素は，空な行内~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.
</p>

			<section id="leading">
<h4 title="Leading and half-leading">10.8.1. 行間と半~行間</h4>

<div class="p">
<p>
~CSSにおいては、
どの~fontも，次の記号で表される~font計量を持つものと見做される：
</p>

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

<p>
（ <a href="#sTypoAscender">TrueType／OpenType~fontの %A, %D を見出す方法</a>を見よ）。
これらは，全体としての~fontの計量であり、
個々の~glyphの~ascenderや~descenderに対応させる必要はないことに注意。
</p>
◎
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.
</div>

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

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

<p class="note">注記：
%L は負にもなり得る。
◎
Note. L may be negative.
</p>

<p id="inline-box-height">
行内~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.
</p>

<p>
置換されない要素の［
~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.
</p>

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

<p id="sTypoAscender" class="note">注記：
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.
</p>

			</section>
			<section id="_line-height">
<h4>10.8.2. `line-height^p ~prop</h4>

◎名 `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 &lt;length&gt; and &lt;percentage&gt; the absolute value; otherwise as specified
◎順 文法に従う
◎表終

<div class="p">
<p>
内容が`行内~level$の要素から構成されるような，`塊~容器~要素$に対しては：
</p>

<ul>
	<li>
`line-height$p は，
要素の中の行l~boxたちの<em>必要最小限</em>な行高（~boxの縦幅）を指定する。
最小な行高は、
`基底線$の上側の最小~縦幅, 下側の最小~深さの和である
</li>
	<li>
各~行l~boxは、
`支柱@
（ strut ）と呼ばれる仮想の~box
— 要素の［
`font-size^p, `line-height$p
］~propを伴う，横幅 0 の行内~box —
から開始されたかのようになる
（この名前は TeX に~~由来する）。
</li>
</ul>
◎
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.).
</div>

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

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

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

<dl>
	<dt>`normal@v</dt>
	<dd>
~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 &lt;number&gt;. We recommend a used value for normal between 1.0 to 1.2. The computed value is normal.
</dd>

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

	<dt>`number$t</dt>
	<dd>
~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.
</dd>

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

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

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

<pre class="lang-css">
div {
  line-height: 1.2;    /* <span class="comment"
>実数（ `number^t ）</span> */
  font-size: 10pt
}
div {
  line-height: 1.2em;  /* <span class="comment"
>長さ（ `length^t ）</span> */
  font-size: 10pt
}
div {
  line-height: 120%;   /* <span class="comment"
>百分率（ `percentage^t ）</span> */
  font-size: 10pt
}
</pre>
</div>

<p>
要素が，複数の~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.
</p>

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

			</section>
			<section id="_vertical-align">
<h4>10.8.3. `vertical-align^p ~prop</h4>

◎名 `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 &lt;percentage&gt; and &lt;length&gt; the absolute length, otherwise as specified
◎順 文法に従う
◎表終

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

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

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

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

<dl>
	<dt>`baseline@v</dt>
	<dd>
~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.
</dd>

	<dt>`middle@v</dt>
	<dd>
~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.
</dd>
	<dt>`sub@v</dt>
	<dd>
~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.)
</dd>
	<dt>`super@v</dt>
	<dd>
~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.)
</dd>
	<dt>`text-top@v</dt>
	<dd>
~boxの上端を，親の`内容~区画$の上端（`§ 10.6.1$ を見よ）に整列する。
◎
Align the top of the box with the top of the parent’s content area (see 10.6.1).
</dd>
	<dt>`text-bottom@v</dt>
	<dd>
~boxの下端を，親の`内容~区画$の下端（`§ 10.6.1$ を見よ）に整列する。
◎
Align the bottom of the box with the bottom of the parent’s content area (see 10.6.1).
</dd>

	<dt id="valdef-vertical-align-percentage">`percentage$t</dt>
	<dd>
~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.
</dd>

	<dt id="valdef-vertical-align-length">`length$t</dt>
	<dd>
~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.
</dd>
</dl>

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

<dl>
	<dt>`top@v</dt>
	<dd>
`整列-済み下位tree$の上端を，行l~boxの上端に整列する。
◎
Align the top of the aligned subtree with the top of the line box.
</dd>
	<dt>`bottom@v</dt>
	<dd>
`整列-済み下位tree$の下端を，行l~boxの下端に整列する。
◎
Align the bottom of the aligned subtree with the bottom of the line box.
</dd>
</dl>

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

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

			</section>
		</section>
	</section>
</main></div>