CSS ~box~modelは、［ `文書~木$内の各~要素に対し生成され，`視覚的~整形~model$に則って~lay-outされる ］ような，矩形の~boxについて，述べる。 ◎ The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.
8.1. ~boxの寸法
各~boxは `内容~区画@（ `content area^en ） （例： ~text, 画像, 等々）を持ち，その周囲に［ `~padding@ （ `padding^en ）／ `~border@ （ `border^en ）／ `~margin@ （ `margin^en ） ］区画も持ち得る。 各~区画の~sizeは、以下に定義される各種~propにより指定される。 次の図式に，これらの区画の互いの~~関係, および［ ~margin, ~border, ~padding ］の各部を指すために利用される各種用語を示す： ◎ Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas; the size of each area is specified by properties defined below. The following diagram shows how these areas relate and the terminology used to refer to pieces of margin, border, and padding:
（ `left^en）
（ `right^en）
［ ~margin／~border／~padding ］は、時計回りに［ 上端（ `top^en ）, 右端（ `right^en ）, 下端（ `bottom^en ）, 左端（ `left^en ） ］に区分される。 （例えば図式における “下端〜” は下端に区分されるものを表す, 等々） ◎ The margin, border, and padding can be broken down into top, right, bottom, and left segments (e.g., in the diagram, "LM" for left margin, "RP" for right padding, "TB" for top border, etc.).
4 種の区画（内容, ~padding, ~border, ~margin ）それぞれの外周は、 “辺（ `edge^en ）” と呼ばれる。 すなわち、各~boxは矩形（ `rectangle^en ）を成す 4 辺からなる： ◎ The perimeter of each of the four areas (content, padding, border, and margin) is called an "edge", so each box has four edges:
- `内容~辺@（ `content edge^en ）または `内縁~辺@（ `inner edge^en ）
- 内容~辺は、~boxの`横幅$（ `width^en ）と`縦幅$（ `height^en ）で与えられる矩形を囲う。 それは、要素の`描画される内容$に依存することが多い。 4 本の内容~辺は、~boxの `内容~box@（ `content box^en ） を定義する。 ◎ The content edge surrounds the rectangle given by the width and height of the box, which often depend on the element's rendered content. The four content edges define the box's content box.
- `~padding辺@（ `padding edge^en ）
- ~padding辺は、~boxの~paddingを囲う。 ~padding幅が 0 ならば、~padding辺は内容~辺と同じになる。 4 本の~padding辺は、~boxの `~padding~box@ を定義する。 ◎ The padding edge surrounds the box padding. If the padding has 0 width, the padding edge is the same as the content edge. The four padding edges define the box's padding box.
- `~border辺@（ `border edge^en ）
- ~border辺は、~boxの~borderを囲う。 ~border幅が 0 ならば、~border辺は~padding辺と同じになる。 4 本の~border辺は、~boxの `~border~box@ を定義する。 ◎ The border edge surrounds the box's border. If the border has 0 width, the border edge is the same as the padding edge. The four border edges define the box's border box.
- `~margin辺@（ `margin edge^en ） または `外縁~辺@（ `outer edge^en ）
- ~margin辺は、~boxの~marginを囲う。 ~margin幅が 0 ならば、~margin辺は~border辺と同じになる。 4 本の~margin辺は、~boxの `~margin~box@ を定義する。 ◎ The margin edge surrounds the box margin. If the margin has 0 width, the margin edge is the same as the border edge. The four margin edges define the box's margin box.
各~辺は［ 上端, 右端, 下端, 左端 ］辺に区分される。 ◎ Each edge may be broken down into a top, right, bottom, and left edge.
~boxの`内容~区画$の寸法 — `内容~横幅@（ `content width^en ） と `内容~縦幅@（ `content height^en ） — は、いくつかの因子に依存する：
- ~boxを生成している要素に［ `width$p／`height$p ］~propが設定されているかどうか
- ~boxは，~textや他の~boxたちを包含するかどうか
- ~boxは ~table, 等々であるかどうかなど。
~boxの横幅と縦幅については、`視覚~整形~modelの詳細$ 章にて論じられる。
◎ The dimensions of the content area of a box — the content width and content height — depend on several factors: whether the element generating the box has the 'width' or 'height' property set, whether the box contains text or other boxes, whether the box is a table, etc. Box widths and heights are discussed in the chapter on visual formatting model details.~boxの［ 内容／~padding／~border ］区画の背景~styleは、それを生成している要素の `background$p ~propにより指定される。 ~margin区画の背景は、常に透明になる。 ◎ The background style of the content, padding, and border areas of a box is specified by the 'background' property of the generating element. Margin backgrounds are always transparent.
8.2. ~margin, ~padding, ~borderの例
［ ~margin, ~padding, ~border ］がどのように相互作用するかを，次の例にて説明する。 HTML 文書~例： ◎ This example illustrates how margins, padding, and borders interact. The example HTML document:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>~margin, ~padding, ~borderの例</TITLE>
<STYLE type="text/css">
UL {
background: yellow;
margin: 1.5em 12px;
padding: 1.5em 12px;
/*
~borderは設定しない
◎
No borders set
*/
}
LI {
color: white; /*
~text色は白色
◎
text color is white
*/
background: blue; /*
内容, ~paddingの背景は青色
◎
Content, padding will be blue
*/
margin: 1.5em 12px;
padding: 1.5em 0px 1.5em 12px; /*
右端だけ~padding `0px^v
◎
Note 0px padding right
*/
list-style: none /*
~list~itemの前に~glyphは生じない
◎
no glyphs before a list item
*/
/*
~borderは設定しない
◎
No borders set
*/
}
LI.withborder {
border-style: dashed;
border-width: medium; /*
すべての側の~border幅を設定-
◎
sets border width on all sides
*/
border-color: lime;
}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>~listの最初の要素
<LI class="withborder">~listの二番目の要素は
行lの折返しを示すため、少し長くされている。
</UL>
</BODY>
</HTML>
による結果の`文書~木$は、二つの 子 `LI^e を持つ `UL^e 要素からなる。 ◎ results in a document tree with (among other relationships) a UL element that has two LI children.
次の図式の最初の図に，この例が生産する結果を示す。 二番目の図には，［ `UL^e 要素と, その子 `LI^e 要素 ］の［ ~margin, ~padding, ~border ］の関係性について示す。 ◎ The first of the following diagrams illustrates what this example would produce. The second illustrates the relationship between the margins, padding, and borders of the UL elements and those of its children LI elements. (Image is not to scale.)
- ~listの最初の要素
- ~listの二番目の要素は、行lの折り返しを示すため，少し長くされている。
- ~listの最初の要素
-
~listの二番目の要素は、行lの折り返しを示すため，少し長くされている。
次の点に注意： ◎ Note that:
- 各 `LI^e ~boxの`内容~横幅$は、上階層から計算される — `LI^e ~boxの`包含塊$は `UL^e 要素により確立される。 ◎ The content width for each LI box is calculated top-down; the containing block for each LI box is established by the UL element.
- 各 `LI^e ~boxの~margin~boxの縦幅は、~boxの`内容~縦幅$に依存し，［ 上端, および下端 ］の［ ~padding, ~border, ~margin ］もそれに加算される。 二つの `LI^e ~boxの合間の縦方向~marginは，互いに`相殺され$ることに注意。 ◎ The margin box height of each LI box depends on its content height, plus top and bottom padding, borders, and margins. Note that vertical margins between the LI boxes collapse.
- 各 `LI^e ~boxの右端~paddingは、幅 0 に設定されている（ `padding$p ~prop）。 その効果は、二番目の説明図にて明らかになる。 ◎ The right padding of the LI boxes has been set to zero width (the 'padding' property). The effect is apparent in the second illustration.
- ~marginは常に透明なので、 `LI^e ~boxたちの~marginは透明であり、 `UL^e の［ ~padding／内容 ］区画の背景~色（黄色）は、それらを透過する。 ◎ The margins of the LI boxes are transparent — margins are always transparent — so the background color (yellow) of the UL padding and content areas shines through them.
- 二番目の `LI^e 要素には、破線（ `dashed^v ）の~borderが指定されている（ `border-style$p ~prop）。 ◎ The second LI element specifies a dashed border (the 'border-style' property).
8.3. 各種~margin~prop： `margin-*^p
~boxの`~margin区画$の幅は、各種~margin~propにより指定される。 `margin$p 略式~propは、 4 つの側すべてに対し，~marginを設定する一方で、他の~margin~propは，対応する側のみを設定する。 これらの~propは，すべての要素に適用されるが、縦方向~marginは，非置換 行内~要素（`可分な行内$）に対しては，効果を持たない。 ◎ Margin properties specify the width of the margin area of a box. The 'margin' shorthand property sets the margin for all four sides while the other margin properties only set their respective side. These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements.
この節にて定義される各種~propは、次のいずれかの値をとり得る `margin-width@t 値~型を参照する： ◎ The properties defined in this section refer to the <margin-width> value type, which may take one of the following values:
- `length$t
- 固定の幅を指定する。 ◎ Specifies a fixed width.
- `percentage$t
- 百分率は、［［ 生成される~box ］の`包含塊$ ］の横幅を基準に計算される。 これは、［ `margin-top$p ／ `margin-bottom$p ］にも該当することに注意。 包含塊の横幅が，この要素に依存する場合の結果の~layoutは、~CSS_2においては定義されない。 ◎ The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.
- `auto^v
- この値の挙動については、`横幅と~marginの計算法$ 節を見よ。 ◎ See the section on calculating widths and margins for behavior.
各種~margin~propに対しては、負の値も許容されるが、実装~特有の制限があり得る。 ◎ Negative values for margin properties are allowed, but there may be implementation-specific limits.
◎名 `margin-top@p, `margin-right@p, `margin-bottom@p, `margin-left@p ◎値 `margin-width$t ◎初 `0^v ◎適 すべての要素 — ただし，［ `table^v （ `inline-table^v ）, `table-caption^v ］以外の`内部~table要素$は除く。 ◎ all elements except elements with table display types other than table-caption, table and inline-table ◎継 されない ◎百 包含塊の横幅を基準にする。 ◎ refer to width of containing block ◎媒 視覚的 ◎算 指定値 — ただし、長さ値は絶対~長さに解決される。 ◎ the percentage as specified or the absolute length ◎表終注記： `margin-top$p, `margin-bottom$p ~propは、非置換 行内~要素（`可分な行内$）に対しては，効果を持たない。 ◎ These properties have no effect on non-replaced inline elements.
これらの~propは、挙げられた順に~boxの［ 上端／右端／下端／左端 ］~marginを設定する。 ◎ These properties set the top, right, bottom, and left margin of a box.
h1 { margin-top: 2em }
`margin$p ~propは、~stylesheet内の一箇所で［ `margin-top$p, `margin-right$p, `margin-bottom$p, `margin-left$p ］を一括して設定する略式~propである。 ◎ The 'margin' property is a shorthand property for setting 'margin-top', 'margin-right', 'margin-bottom', and 'margin-left' at the same place in the style sheet.
一連の成分値は、~marginの各 側の幅を`時計回りに設定する$。 ◎ If there is only one component value, it applies to all sides. If there are two values, the top and bottom margins are set to the first value and the right and left margins are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.
body { margin: 2em } /* すべての側の~marginを `2em^v に設定
◎
all margins set to 2em
*/
body { margin: 1em 2em } /*
上端, 下端 =`1em^v, 右端, 左端 =`2em^v
◎
top & bottom = 1em, right & left = 2em
*/
body { margin: 1em 2em 3em } /*
上端=`1em^v, 右端=`2em^v, 下端=`3em^v, 左端=`2em^v
◎
top=1em, right=2em, bottom=3em, left=2em
*/
上の例の最後の規則は 下の例に等価である： ◎ The last rule of the example above is equivalent to the example below:
body {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /*
反対~側（右端）から複製される
◎
copied from opposite side (right)
*/
}
8.3.1. ~marginの相殺法
CSS においては、二つ以上の（互いに同胞†でないこともある）~boxの いくつかの~marginが互いに`連接して$いるときには、単独の~marginを形成するように結合され得る。 ~marginをこの仕方で結合することを， `相殺-@（ `collapse^en ） するという††。 結合された結果の~margin【または, それを成す~marginたち】は、 `相殺された~margin@（ `collapsed margin^en ） と呼ばれる。 ◎ In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
【† 同じ親を共有する子 】【†† すなわち、~margin区画のみ互いに重なり得る下で，可能な限り互いの間を詰める。 】
次の場合を除き、`連接して$いる縦方向~marginは，`相殺され$る： ◎ Adjoining vertical margins collapse, except:
- 根~要素により生成される~boxの~marginは、他と`相殺され$ることはない。 ◎ Margins of the root element's box do not collapse.
- `~clearance$を伴う要素の 上端~marginと下端~marginが`連接して$いる場合、それらの~marginは，それに`連接して$いる［ 後続する同胞の~margin ］とは`相殺され$るが、その結果の~marginは、親~塊の下端~marginとは`相殺され$ない。 ◎ If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block.
横方向~marginどうしが`相殺され$ることは、決してない。 ◎ Horizontal margins never collapse.
２つの~marginは、次のいずれも満たされるとき, そのときに限り， `連接して@ いる（ `adjoining^en ）とされる： ◎ Two margins are adjoining if and only if:
- 当の~marginを有する両~boxとも、同じ`塊~整形文脈$に関与する，`~flow内$にある`塊level~box$である。 ◎ both belong to in-flow block-level boxes that participate in the same block formatting context
- 両~marginを分離するような［ `行l~box$／`~clearance$／`~padding$／`~border$ ］は無い。 （ この目的においては ある種の縦幅 0 である行l~boxは、無視されることに注意（ 9.4.2 節 を見よ）。 ） ◎ no line boxes, no clearance, no padding and no border separate them (Note that certain zero-height line boxes (see 9.4.2) are ignored for this purpose.)
-
両~marginとも，縦方向に隣り合う~box辺に属する — すなわち、両者は，以下に挙げるいずれかの~pairを成す： ◎ both belong to vertically-adjacent box edges, i.e. form one of the following pairs:
- ~boxの上端~marginと, ~boxの最初の［ `~flow内$にある子 ］の上端~margin ◎ top margin of a box and top margin of its first in-flow child
- ~boxの下端~marginと, ~boxの次の［ `~flow内$にある後続する同胞 ］の上端~margin ◎ bottom margin of box and top margin of its next in-flow following sibling
- ［ `height$p の算出値が `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
-
次のすべてを満たす~boxの，上端~marginと, 下端~margin：
- 新たな塊~整形文脈を確立しない, かつ
- `min-height$p の算出値は 0, かつ
- `height$p の算出値は 0 または `auto^v , かつ
- `~flow内$にある子を持たない。
`相殺された~margin$は、それを成す~margin成分のいずれかが，別の~marginと`連接して$いるならば、その別の~marginとも`連接して$いるものと見なされる。 ◎ A collapsed margin is considered adjoining to another margin if any of its component margins is adjoining to that margin.
注記： `連接して$いる~marginたちは、同胞や先祖の関係にない要素たちから生成されることもある。 ◎ Note. Adjoining margins can be generated by elements that are not related as siblings or ancestors.
注記： 上の規則は、次を含意する： ◎ Note the above rules imply that:
- ［ `浮動-$された ／ `絶対位置され$た ／ `行内-塊$ ］~boxの~marginは、（~box自身の`~flow内$にある子も含め，）他のどの~boxの~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).
- 新たな塊~整形文脈を確立する要素（`浮動体$や［ `overflow$p が非 `visible^v にされた要素 ］など）の~marginは、その`~flow内$にあるどの子~boxの~marginとも`相殺され$ない。 ◎ ↑
- ［ `~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.
- ［ `~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.
-
`~flow内$にある塊~boxの下端~marginと, その~boxの最後の［
`~flow内$にある`塊level$の子
］の下端~marginとは、次がすべて満たされるならば，`相殺され$る：
◎
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＼
- ~boxの `height$p は `auto^v にされ， `min-height$p は 0 にされている。 ◎ ↑
- ~boxは［ 下端~padding, 下端~border ］を持たない。 ◎ the box has no bottom padding and no bottom border and＼
- 子の下端~marginと, `~clearance$を持つものの上端~marginとは、`相殺され$ていない。 ◎ the child's bottom margin does not collapse with a top margin that has clearance.
-
~boxの上端~marginと, 下端~marginとは、次のすべてが満たされるならば，`相殺され$る：
- `min-height$p 値は 0 。
- ~boxは、 上端／下端 ~borderも 上端／下端 ~paddingも持たない。
- ~boxの `height$p 値は 0 または `auto^v 。
- ~boxは、`行l~box$を包含しない。
- ~boxの`~flow内$にある子たち（もしあれば）すべての~marginは，`相殺され$ている。
二つ以上の~marginが`相殺され$るときの結果の~margin幅は、各`相殺された~margin$幅の最大になる。 負の~marginが混じっている場合、それらの絶対~値の最大が，正の~marginの最大（正の~marginが無ければゼロ）から差引かれる。 ◎ When two or more margins collapse, the resulting margin width is the maximum of the collapsing margins' widths. In the case of negative margins, the maximum of the absolute values of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. If there are no positive margins, the maximum of the absolute values of the adjoining margins is deducted from zero.
ある~boxの上端~marginと下端~marginとが`連接して$いる場合、他の~marginたちが，その~marginを `挟むように相殺-@ する（ `collapse through^en ）ことも起こり得る。 この場合の~boxの位置は、［ 【その~boxを生成した要素と】 `相殺された~margin$を成す他の要素 ］との関係性に依存する： ◎ If the top and bottom margins of a box are adjoining, then it is possible for margins to collapse through it. In this case, the position of the element depends on its relationship with the other elements whose margins are being collapsed.
- 要素の~marginと, その親の上端~marginとが`相殺され$ている場合、要素の~boxの上端~border辺は，親のそれと同じ位置になるものと定義される。 ◎ If the element's margins are collapsed with its parent's top margin, the top border edge of the box is defined to be the same as the parent's.
- 他の場合、要素の親の~marginのうち，~margin相殺の一部を成すものは、ないか, または下端~marginのみ，のいずれかになる。 この場合の要素の上端~border辺の位置は、要素の下端~borderが 0 でなかったとき 【すなわち，要素の上端~marginと下端~marginとが連接してなく，相殺されなかったとき】 と同じになる。 ◎ Otherwise, either the element's parent is not taking part in the margin collapsing, or only the parent's bottom margin is involved. The position of the element's top border edge is the same as it would have been if the element had a non-zero bottom border.
要素の~marginが`挟むように相殺-$されている場合、その位置が，［ その~marginを挟んでいる他の~margin ］を持つ要素の位置に効果が及ぶことはないことに注意 — 要素の上端~border辺の位置が要求されるのは、これらの要素の子孫を~lay-outするときに限られる。 ◎ Note that the positions of elements that have been collapsed through have no effect on the positions of the other elements with whose margins they are being collapsed; the top border edge position is only required for laying out descendants of these elements.
8.4. 各種~padding~prop： `padding-*^p
各種~padding~propは、~boxの`~padding区画$の幅を指定する。 `padding$p 略式~propは， 4 側すべての~paddingを設定する一方で、 他の~padding~propは，それに対応する側のみを設定する。 ◎ The padding properties specify the width of the padding area of a box. The 'padding' shorthand property sets the padding for all four sides while the other padding properties only set their respective side.
この節にて定義される~propは、次のいずれかの値をとる `padding-width@t 値~型を参照する： ◎ The properties defined in this section refer to the <padding-width> value type, which may take one of the following values:
- `length$t
- 固定の幅を指定する。 ◎ Specifies a fixed width.
- `percentage$t
- 百分率は、生成される~boxの`包含塊$の 横幅を基準に計算される — `padding-top$p ／ `padding-bottom$p においても。 包含塊の横幅が，この要素に依存する場合の結果の~layoutは、~CSS_2においては定義されない。 ◎ The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.
~margin~propと違って，~padding値は負の値をとれない。 ~margin~propと同様に，~padding~propに対する百分率~値は、生成される~boxの包含塊の横幅を基準にする。 ◎ Unlike margin properties, values for padding values cannot be negative. Like margin properties, percentage values for padding properties refer to the width of the generated box's containing block.
◎名 `padding-top@p, `padding-right@p, `padding-bottom@p, `padding-left@p ◎値 `padding-width$t ◎初 `0^v ◎適 すべての要素 — ただし，［ `table-cell^v, `table-caption^v ］以外の`内部~table要素$は除く。 ◎ all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column ◎継 されない ◎百 包含塊の横幅を基準にする。 ◎ refer to width of containing block ◎媒 視覚的 ◎算 指定値 — ただし、長さ値は絶対~長さに解決される。 ◎ the percentage as specified or the absolute length ◎表終これらの~propは、挙げられた順に，~boxの［ 上端, 右端, 下端, 左端 ］~paddingを設定する。 ◎ These properties set the top, right, bottom, and left padding of a box.
blockquote { padding-top: 0.3em }
`padding$p ~propは、［ `padding-top$p, `padding-right$p, `padding-bottom$p, `padding-left$p ］を一括して設定する略式~propである。 ◎ The 'padding' property is a shorthand property for setting 'padding-top', 'padding-right', 'padding-bottom', and 'padding-left' at the same place in the style sheet.
一連の成分値は、~paddingの各 側の幅を`時計回りに設定する$。 ◎ If there is only one component value, it applies to all sides. If there are two values, the top and bottom paddings are set to the first value and the right and left paddings are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.
~padding区画の 色／画像 は、 `background$p ~propを介して指定される： ◎ The surface color or image of the padding area is specified via the 'background' property:
h1 {
background: white;
padding: 1em 2em;
}
上の例は、縦方向~padding（ `padding-top$p, `padding-bottom$p ）を `1em^v に，横方向~padding（ `padding-right$p, `padding-left$p ）を `2em^v に指定する。 `em^u 単位は、要素の~font~sizeに`相対的$になる： `1em^v は、利用-中の~fontの~sizeに等しい。 ◎ The example above specifies a '1em' vertical padding ('padding-top' and 'padding-bottom') and a '2em' horizontal padding ('padding-right' and 'padding-left'). The 'em' unit is relative to the element's font size: '1em' is equal to the size of the font in use.
8.5. 各種~border~prop
【 この節の内容の和訳は CSS Backgrounds and Borders Module の ~border節 に移譲。 】
8.5.1. ~border線幅： `border-*-width^p
【 この節の内容の和訳は CSS Backgrounds and Borders Module の `border-*-width^p 節 に移譲。 参照のため、この節にて定義される用語を以下に挙げる： 】
- `border-width@t
- `thin^v
- `medium^v
- `thick^v
- `border-top-width@p
- `border-right-width@p
- `border-bottom-width@p
- `border-left-width@p
- `border-width@p
8.5.2. ~border線色： `border-*-color^p
【 この節の内容の和訳は CSS Backgrounds and Borders Module の `border-*-color^p 節 に移譲。 参照のため、この節にて定義される用語を以下に挙げる： 】
- `border-top-color@p
- `border-right-color@p
- `border-bottom-color@p
- `border-left-color@p
- `border-color@p
8.5.3. ~border~style： `border-*-style^p
【 この節の内容の和訳は CSS Backgrounds and Borders Module の `border-*-style^p 節 に移譲。 参照のため、この節にて定義される用語を以下に挙げる： 】
- `border-style@t
- `none@v
- `hidden@v
- `dotted@v
- `dashed@v
- `solid@v
- `double@v
- `groove@v
- `ridge@v
- `inset@v
- `outset@v
- `border-top-style@p
- `border-right-style@p
- `border-bottom-style@p
- `border-left-style@p
- `border-style@p
8.5.4. 各種~border略式~prop： `border-*^p
【 この節の内容の和訳は CSS Backgrounds and Borders Module の 各種~border略式~prop節 に移譲。 参照のため、この節にて定義される用語を以下に挙げる： 】
- `border-top@p
- `border-right@p
- `border-bottom@p
- `border-left@p
- `border@p
8.6. 双方向的~文脈の下での行内~要素の~box~model
【 この節の内容の和訳は CSS Writing Module 2.4.5 節 に移譲。 】