1. 序論
`この節（下位節は除く）は規範的ではない。^em ◎ This subsection is not normative.
~CSSは、 ~source文書~内の［ 各~要素, 各~文字列が成す~text ］をどう~lay-outするかを，次により述べる ⇒ `要素~tree$を`~box~tree$に変形した上で、 その各`~box$に — 各種~CSS~propの値に依存して — `~canvas$上での［ ~size, 位置, 積層~level ］を与える。 ◎ CSS describes how each element and each string of text in a source document is laid out by transforming the element tree into a set of boxes, whose size, position, and stacking level on the canvas depend on the values of their CSS properties.
注記： 各種~propが~box~tree内の要素に どうアテガわれるかは、 `~CSSにおける~cascade法と継承＠~CASCADE$citeが述べる。 一方で，`要素~tree$が`~box~tree$に どう変形されるかは、 `css-display-3$r `§ 序論＠~CSSDISP#intro$が述べる。 ◎ Note: CSS Cascading and Inheritance describes how properties are assigned to elements in the box tree, while CSS Display 3 § 1 Introduction describes how the element tree is transformed into the box tree.
各~CSS`~box$には、［ 矩形な内容~区画, その周りに~padding帯, その周りに~border, その外側に~margin ］がある。 各種`~sizing~prop$ `css-sizing-3$r は、 ~layoutを制御する他の様々な~propとともに，内容~区画の~sizeを定義する。 ~boxを~styleする~prop — `padding$p, `border$p, `margin$p, それらの下位prop — は、 これらのうち他の区画の~sizeを定義する。 ~margin, ~paddingは、 この~moduleが定義する。 ~borderは、 `css-backgrounds-3$r にて定義される。 ◎ Each CSS box has a rectangular content area, a band of padding around the content, a border around the padding, and a margin outside the border. The sizing properties [css-sizing-3], together with various other properties that control layout, define the size of the content area. The box styling properties—padding and its longhands, border and its longhands, and margin and its longhands—define the sizes of these other areas. Margins and padding are defined in this module; borders are defined in [css-backgrounds-3].
注記： この~moduleは、 元々は，［ 次に関係する，~CSS~level 3 仕様による注釈文 ］を`包含していた＠~TR/2018/WD-css3-box-20180731/$： ~box生成（今や `css-display-3$r にて定義される）, ~box~model（ここに定義される）, `塊~layout$（今や `CSS2$r の `§ 9＠~CSS2J#visuren$, `§ 10＠~CSS2J#visudet$ においてのみ定義される）。 その注釈文の保守は， CSS 2.1 を開発する間に捨て置かれたため、 CSS 2.1 が~~完成したときには，ひどく~~旧式と化した。 そのため，注釈文のうち塊~layoutを成す部位は、 退役し，`CSS2＠~TR/CSS2$cite に同期し直され， いつか将来に新たな `Block Layout^cite ~module用の入力として更新されることになる。 その部位はまた、 この~moduleからも, `CSS Display＠~CSSDISP$cite ~moduleからも分け隔てられている — その作業~量が膨大になる実施上の懸念があること, および、 ~CSSには今や，塊~layoutの他にも［ それぞれが自前の~moduleを成すに~~値する，複数の並立する~layout~model ］ （ `Flex Layout＠~CSSFLEX$cite, `Grid Layout＠~CSSGRID$cite, `Positioned Layout＠~CSSPOS$cite, `Table Layout＠~TR/css-tables/$cite ） があるので。 ◎ Note: This module originally contained the CSS Level 3 specification prose relating to box generation (now defined in [css-display-3]), the box model (defined here), as well as block layout (now only defined in [CSS2] Chapters 9 and 10). Since its maintenance was put aside during the development of CSS2.1, its prose was severely outdated by the time CSS2 Revision 1 was finally completed. Therefore, the block layout portion of the prose has been retired, to be re-synched to CSS2 and updated as input to a new Block Layout module at some point in the future. It is being split apart from this module and from the CSS Display Module both because of the practical concern that it would be a huge amount of work and also in recognition that CSS now has multiple layout models (Flex Layout, Grid Layout, Positioned Layout, and Table Layout, in addition to Block Layout) which each deserve their own parallel module.
1.1. 値~定義
【 この節の内容は `~CSS日本語訳 共通~page＠~CSScommon#values$に移譲。 】
1.2. ~module間の相互作用
この~moduleは、 `CSS2$r の［ § 8.1, § 8.2, § 8.3 （ただし, § 8.3.1 は除く）, § 8.4 ］に定義された［ ~margin, ~padding ］用の各種~propの定義を置換する。 【`参照＠~CSS22/box.html$】 ◎ This module replaces the definitions of the margin and padding properties defined in [CSS2] sections 8.1, 8.2, 8.3 (but not 8.3.1), and 8.4.
この~moduleにおける，すべての~propは、［ `first-line$pe, `first-letter$pe ］疑似要素にも適用される。 ◎ All properties in this module apply to the ::first-line and ::first-letter pseudo-elements.
【この訳に特有な表記規約】
（ある略式~propに）指定された 1 個 〜 4 個の成分~値［ %v1, %v2, %v3, %v4 ］で，［ 上端, 右端, 下端, 左端 ］に対応する（各 下位~propの）値を `時計回りに設定する@ とは、 各~側の値を次に従って設定することを意味する：
- %v2 ~SET %v2 は指定されて［ いるならば %v2 ／ いないならば %v1 ］
- %v3 ~SET %v3 は指定されて［ いるならば %v3 ／ いないならば %v1 ］
- %v4 ~SET %v4 は指定されて［ いるならば %v4 ／ いないならば %v2 ］
- ［ 上端, 右端, 下端, 左端 ］に対応する値 ~SET 順に［ %v1, %v2, %v3, %v4 ］
（この句は，他所を簡潔に記述するためにあり、 この~module, および他の~CSS~module（の和訳）から共通して利用される。）
2. ~CSS~box~model
各`~box$には， `内容~区画@ （ `content area^en ）があり （それは、 ~boxの内容 — ~text, 子孫~box, 画像や他の`置換d要素$の内容, 等々 — を包含する）、 その周囲には，内から順に［ `~padding区画@ （ `padding area^en ）／ `~border区画@ （ `border area^en ）／ `~margin区画@ （ `margin area^en ） ］がある【！optional】。 ［ 内容~区画の~size／他の区画の各~側の幅（太さ） ］【！size of each area】は、 対応する~propにより指定され， 0 にもなり得る （~marginの事例では負にもなり得る）。 次の図式に，これらの区画がどう関係するか, および`~box$の各部を指すために利用される各種用語を示す： ◎ Each box has a content area (which contains its content—text, descendant boxes, an image or other replaced element content, etc.) and optional surrounding padding, border, and margin areas; the size of each area is specified by corresponding properties, and can be zero (or in the case of margins, negative). The following diagram shows how these areas relate and the terminology used to refer to the various parts of the box:
~boxの［ 内容／~padding／~border ］区画の背景は、 ~boxの各種 `background-*＠~CSSBG#backgrounds$p ~propにより指定される。 各種 `border-*＠~CSSBORDER#borders$p ~propを利用すれば、 ~boxの~border区画も，ある~border~styleで塗れる。 ~marginは、 常に透明になる。 `css-backgrounds-3$r を見よ。 ◎ The background of the content, padding, and border areas of a box is specified by its background properties. The border area can additionally be painted with a border style using the border properties. Margins are always transparent. See [css-backgrounds-3].
［ ~margin／~border／~padding ］は、 時計回りに［ 上端（ `top^en ）, 右端（ `right^en ）, 下端（ `bottom^en ）, 左端（ `left^en ） ］に区分され、 それぞれ，対応する~propで独立に制御できる。 ◎ The margin, border, and padding can be broken down into top, right, bottom, and left segments, each of which can be controlled independently by its corresponding property.
2.1. ~boxと辺
4 種の区画（内容, ~padding, ~border, ~margin）それぞれの外周は、 `辺@ （ `edge^en ） と呼ばれる — 辺も［ 上端, 右端, 下端, 左端 ］各~側に区分できる。 したがって，各~boxは、 4 側にある 4 辺からなる。 ◎ The perimeter of each of the four areas (content, padding, border, and margin) is called an edge and each edge can be broken down into a top, right, bottom, and left side. Thus each box has four edges each composed of four sides:
- `内容~辺@ （ `content edge^en ）／ `内縁~辺@ （ `inner edge^en ）
- 内容~辺は、 ~boxの`横幅$と`縦幅$で与えられる矩形を囲う。 それは、 要素の内容や`包含塊$の~sizeに依存することが多い。 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 content and/or its containing block size. The four sides of the content edge together define the box’s content box.
- `~padding辺@ （ `padding edge^en ）
- ~padding辺は、 ~boxの~paddingを囲う。 ある側の~padding幅が 0 ならば、 その側にある~padding辺と内容~辺は一致する。 4 側にある`~padding辺$は、 ~boxの `~padding~box@ を定義し，~boxの［ `内容~区画$, `~padding区画$ ］を包含する。 ◎ The padding edge surrounds the box’s padding. If the padding has zero width on a given side, the padding edge coincides with the content edge on that side. The four sides of the padding edge together define the box’s padding box, which contains both the content and padding areas.
- `~border辺@ （ `border edge^en ）
- ~border辺は、 ~boxの~borderを囲う。 ある側の~border幅が 0 ならば、 その側にある~border辺と~padding辺は一致する。 4 側にある~border辺は、 ~boxの `~border~box@ を定義し，~boxの［ `内容~区画$, `~padding区画$, `~border区画$ ］を包含する。 ◎ The border edge surrounds the box’s border. If the border has zero width on a given side, the border edge coincides with the padding edge on that side. The four sides of the border edge together define the box’s border box, which contains the box’s content, padding, and border areas.
- `~margin辺@ （ `margin edge^en ）／ `外縁~辺@ （ `outer edge^en ）
- ~margin辺は、 ~boxの~marginを囲う。 ある側の~margin幅が 0 ならば、 その側にある~margin辺と~border辺は一致する。 ~margin幅が 0 ならば、 ~margin辺は~border辺と同じになる。 4 側にある~margin辺は、 ~boxの `~margin~box@ を定義し，~boxの［ `内容~区画$, `~padding区画$, `~border区画$, `~margin区画$ ］すべてを包含する。 ◎ The margin edge surrounds the box’s margin. If the margin has zero width on a given side, the margin edge coincides with the border edge on that side. The four sides of the margin edge together define the box’s margin box, which contains the all of the box’s content, padding, border, and margin areas.
`border-radius$p 様な~propは、 ~boxの`辺$が成す図形を変更し得る — その結果は、 【~boxの背景などを】［ 塗る／切取る ］ときに利用される （ `CSS-BACKGROUNDS-3$r `§ 隅の切取n法＠~CSSBORDER#corner-clipping$ を見よ） — しかしながら，これらの効果は、 概して，~layoutには影響しない。 各~仕様は、 これら【変更された辺／変更される前の辺】を判別するためとして， 関連な辺を［ `形状付けられた辺@ （ `shaped edge^en ）／ `形状付けられない辺@ （ `unshaped edge^en ） ］として参照rできる。 ◎ Properties like border-radius can change the shape of the box’s edges as used for painting and clipping (see CSS Backgrounds 3 § 4.3 Corner Clipping); these effects typically do not affect layout however. To distinguish, specifications can refer to the relevant shaped edge or unshaped edge
2.2. 断片化
~boxが［ 何~行lか, または何~pageか ］に分断され，別々な`~box断片$に`断片化-$されたときは、 その［ `内容~box$, `~padding~box$, `~border~box$, `~margin~box$ ］もまた断片化される。 ［ 内容／~padding／~border／~margin ］区画が断片化にどう反応するかは、 `css-break-3$r にて指定され， `box-decoration-break$p ~propにより制御される。 ◎ When a box fragments—is broken, as across lines or across pages, into separate box fragments—each of its boxes (content box, padding box, border box, margin box) also fragments. How the content/padding/border/margin areas react to fragmentation is specified in [css-break-3] and controlled by the box-decoration-break property.
2.3. ~box辺~keyword
次に挙げる~CSS~keyword — `box@t 型の~keyword — は、 様々な~box辺を基準にする必要がある~prop （ `transform-box$p, `background-clip$p など） における利用-用に定義される： ◎ The following <box> CSS keywords are defined for use in properties (such as transform-box and background-clip) that need to refer to various box edges:
- `content-box@v
- ［ `内容~box$／`内容~辺$ ］を基準にする （~SVG文脈においては、 `fill-box$v として扱われる）。 ◎ Refers to the content box or content edge. (In an SVG context, treated as fill-box.)
- `padding-box@v
- ［ `~padding~box$／`~padding辺$ ］を基準にする （~SVG文脈においては、 `fill-box$v として扱われる）。 ◎ Refers to the padding box or padding edge. (In an SVG context, treated as fill-box.)
- `border-box@v
- ［ `~border~box$／`~border辺$ ］を基準にする （~SVG文脈においては、 `stroke-box$v として扱われる）。 ◎ Refers to the border box or border edge. (In an SVG context, treated as stroke-box.)
- `margin-box@v
- ［ `~margin~box$／`~margin辺$ ］を基準にする （~SVG文脈においては、 `stroke-box$v として扱われる）。 ◎ Refers to the margin box or margin edge. (In an SVG context, treated as stroke-box.)
- `fill-box@v
- ［ `~obj限界~box$または その各~辺 ］を基準にする （~CSS~box文脈においては、 `content-box$v として扱われる）。 ◎ Refers to the object bounding box or its edges. (In a CSS box context, treated as content-box.)
- `stroke-box@v
- ［ `~stroke限界~box$または その各~辺 ］を基準にする （~CSS~box文脈においては、 `border-box$v として扱われる）。 ◎ Refers to the stroke bounding box or its edges. (In a CSS box context, treated as border-box.)
- `view-box@v
- 最も近い【先祖の】`~SVG表示域$の `原点~box@ を基準にする — それは矩形であり、 ~SVG表示域と同じ［ 縦幅／横幅 ］を伴う, かつ左上~隅が座標系の原点に一致するよう位置される （~CSS~box文脈においては、 `border-box$v として扱われる）。 ◎ Refers to the nearest SVG viewport’s origin box, which is a rectangle with the width and height of the SVG viewport, positioned such that its top left corner is anchored at the coordinate system origin. (In a CSS box context, treated as border-box.)
- 注記： `~SVG表示域$それ自身が原点をとらない場合、 `原点~box$は，実際には~SVG表示域に対応しない。 ◎ Note: When the SVG viewport is not itself anchored at the origin, this origin box does not actually correspond to the SVG viewport!
共通的に利用される `box$t の下位集合を表現するため、 便利~用に，次に挙げる値~型が定義される： ◎ For convenience, the following value types are defined to represents commonly used subsets of <box>:
`visual-box@t = `content-box$v | `padding-box$v | `border-box$v `layout-box@t = `visual-box$t | `margin-box$v `paint-box@t = `visual-box$t | `fill-box$v | `stroke-box$v `coord-box@t = `paint-box$t | `view-box$v
3. ~margin
`~margin@ は、 `~box$の~border辺を囲う — それは、 他の~boxとの合間に間隔を供する。 各種 `~margin~prop@ は、 ~boxの`~margin区画$の太さを指定する： `margin$p `略式~prop$は， 4 側すべての~marginを設定する一方で、 その`下位prop$たちは，各自に対応する側のみを設定する。 この仕様は、 `物理的$な `margin$p 略式~propを定義する。 加えて `CSS-LOGICAL-1$r は、 `~flow相対$な［ `margin^p 略式~propの`各種 下位prop＠~CSSLOGICAL#margin-properties$ ］を定義する。 どちらの`~margin~prop$たちも，同じ各~側の~marginを制御する — それらは、 各~側を異なる下位propで指しているに過ぎない。 ◎ Margins surround the border edge of a box, providing spacing between boxes. The margin properties specify the thickness of the margin area of a box. The margin shorthand property sets the margin for all four sides while the margin longhand properties only set their respective side. This specification defines the physical margin longhands; CSS Logical Properties 1 §4.2 Flow-Relative Margins: the margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands additionally defines flow-relative margin longhands. Both sets of properties control the same set of margins: they are just different ways of indexing each side.
注記： `塊~layout$において`連接して$いる~marginは、 `相殺される^em。 詳細は `CSS2$r `§ ~marginの相殺-法＠~CSS2J#collapsing-margins$ を見よ。 また，`断片化~分断$に`連接して$いる~marginは、 切落されることもある。 詳細は、 `CSS-BREAK-4$r `§ 分断に連接している~margin＠~CSSBREAK#break-margins$ を見よ。 ◎ Note: Adjoining margins in block layout collapse. See CSS2§8.3.1 Collapsing Margins for details. Also, margins adjoining a fragmentation break are sometimes truncated. See CSS Fragmentation 4 § 5.2 Adjoining Margins at Breaks: the margin-break property for details.
3.1. ~pageに相対的な（物理的）~margin~prop： `margin-top^p, `margin-right^p, `margin-bottom^p, `margin-left^p ~prop
これらの~propは、 挙げられた順に`~box$の［ 上端, 右端, 下端, 左端 ］~marginを設定する。 ◎ These properties set the top, right, bottom, and left margin of a box, respectively.
各種~margin~propに対しては、 負な値も許容されるが、 実装に特有な制限sがあり得る。 ◎ Negative values for margin properties are allowed, but there may be implementation-specific limits.
3.2. ~margin略式： `margin^p ~prop
他の欄は、 `margin-top$p と同じ 【なので，この訳では省略する】。
◎ Name: margin Value: <'margin-top'>{1,4} Initial: 0 Applies to: all elements except internal table elements, ruby base containers, and ruby annotation containers Inherited: no Percentages: refer to logical width of containing block Computed value: see individual properties Canonical order: per grammar Animation type: by computed value type`margin$p ~propは、 単独の宣言で［ `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 in a single declaration.
一連の成分~値は、 ~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.
いくつかの~margin宣言をデモる~code： ◎ The following code demonstrates some possible margin declarations.
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)
*/
}
3.3. 容器~辺における~margin： `margin-trim^p ~prop
~marginは、 同胞どうしの合間には欲されても，それらの容器の［ 始端／終端 ］には欲されないことはよくある — その間隔は~paddingで制御できるので。 この~propは、［ 容器の子の~marginのうち，容器の辺に連接するもの ］を削ることを許容する。 各種~値の意味は： ◎ Oftentimes, margins are desired between siblings, but not at the start/end of the container where spacing can be controlled with padding. This property allows the container to trim the margins of its children where they adjoin the container’s edges. Values have the following meanings:
- `none@v
- この容器により~marginが削られることはない。 ◎ Margins are not trimmed by the container.
- 注記： しかしながら，`塊~layout$においては、 子の~marginは親の~marginと相殺され得る。 `~marginの相殺-法＠~CSS2J#collapsing-margins$ `CSS2$r を見よ。 ◎ Note: However, in block layout, child margins can collapse with their parent. See CSS2§8.3.1: Collapsing Margins.
- `block-start@v
- `block-end@v
- この容器の`~flow内$にある~boxに対しては、 指定された辺に隣接な［ ~boxの~margin ］は 0 に切落される。 そのような~marginと相殺される［ 子孫の~margin ］も（もしあれば）切落される （が、 この容器の［ 自前の~margin, 同胞の~margin, 先祖の~margin ］は切落されない）。 ◎ For in-flow boxes contained by this box, margins adjacent to the box’s specified edges are truncated to zero. It also truncates any descendant margins collapsed with such a margin (but not its own, its siblings’, or its ancestors’).
- `block@v
- `block-start block-end^v に算出される。 ◎ Computes to block-start block-end.
注記： 直列化は最短にする原則に従って， `block$v に等価な`算出d値$は、 その~keywordとして，直列化されることになる。 ◎ Note: Following the shortest-serialization principle, computed values equivalent to block will serialize as that keyword.
隣接性は、 ~box整列 `CSS-ALIGN-3$r により統治される空間には敏感ではない。 ◎ Adjacency is not sensitive to space governed by box alignment [CSS-ALIGN-3].
注記： `margin-break$p ~propも見よ — それは、［ `断片化~分断$（~page, ~col, 等々の分断）に`連接して$いる，~boxの自前の~margin ］に適用される。 ◎ Note: See also the margin-break property, which applies to the box’s own margins when they adjoin a fragmentation break (page break / column break / etc.).
~boxが`断片化~文脈$を確立する場合に，この~propが分断~箇所の~marginにどう影響するかを定義する。 `3314$issue も見よ。 ◎ Define how this property affects margins at breaks if the box establishes a fragmentation context. See also Issue 3314.
注記： この~propは、 `塊~容器$に指定されても，【それを`包含塊$とする】`浮動体$の~marginに対しては効果は無い。 この~moduleの将来~levelは、 浮動体~用に特有な制御を導入し得る。 ◎ Note: This property has no effect on the margins of floats when specified on a block container; a future level of this module may introduce specific controls for floats.
3.3.1. 塊~容器~内容を削るとき
特定的に`塊~容器$ %容器 に対しては、 `margin-trim$p は，次を破棄する： ◎ For block containers specifically, margin-trim discards:
- `塊-始端$辺にて削るときは ⇒ %容器 の最初の子が`塊~level$であるならば、 その塊-始端~margin。 ◎ The block-start margin of a block-level first child, when trimming at the block-start edge.
- `塊-終端$辺にて削るときは ⇒ %容器 の最後の子が`塊~level$であるならば、 その塊-終端~margin。 ◎ The block-end margin of a block-level last child, when trimming at the block-end edge.
- 以上に挙げた~marginとともに相殺される他の~marginがあれば，それも。 ◎ Any margin collapsed with these margins.
【 最初, 最後, 子は、 `~box~tree$におけるそれらを意味するであろう。 】
それは、 `行内~level$の子孫の~marginに対しては，効果は無い。 ◎ It has no effect on any margins of inline-level descendants.
4. ~padding
`~padding@ は、 `~box$の`内容~辺$と`~padding辺$の合間に挿入される — それは、 内容と~borderの合間に間隔を供する。 各種 `~padding~prop@ は、 ~boxの`~padding区画$の太さを指定する。 `padding$p `略式~prop$は， 4 側すべての~paddingを設定する一方で、 その`下位prop$たちは，各自に対応する側のみを設定する。 この仕様は、 `物理的$な `padding$p 略式~propを定義する。 加えて `CSS-LOGICAL-1$r は、 `~flow相対$な［ `padding^p 略式~propの`各種 下位prop＠~CSSLOGICAL#padding-properties$ ］を定義する。 どちらの`~padding~prop$たちも，同じ各~側の~paddingを制御する — それらは、 各~側を異なる下位propで指しているに過ぎない。 ◎ Padding is inserted between the content edge and the padding edge of a box, providing spacing between the content and the border. The padding properties specify the thickness of the padding area of a box. The padding shorthand property sets the padding for all four sides while the padding longhand properties only set their respective side. This specification defines the physical padding longhands; CSS Logical Properties 1 §4.4 Flow-Relative Padding: the padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands additionally defines flow-relative padding longhands. Both sets of properties control the same set of padding: they are just different ways of indexing each side.
注記： ~box上に指定された背景は、 既定では，~padding辺の中に~lay-outされ, 塗られる （それは、 `~border区画$内の~borderの直下に塗ることもできる）。 この挙動は、［ `background-origin$p, `background-clip$p ］~propを利用して調整できる。 ◎ Note: Backgrounds specified on the box are by default laid out and painted within the padding edges. (They are additionally painted underneath the border, in the border area.) This behavior can be adjusted using the background-origin and background-clip properties.
4.1. ~pageに相対的な（物理的な）~padding~prop： `padding-top^p, `padding-right^p, `padding-bottom^p, `padding-left^p ~prop
これらの~propは、 挙げられた順に，`~box$の［ 上端, 右端, 下端, 左端 ］~paddingを設定する。 ◎ These properties set the top, right, bottom, and left padding of a box, respectively.
各種~padding~propに対する負な値は妥当でない。 ◎ Negative values for padding properties are invalid.
4.2. ~padding略式： `padding$p ~prop
他の欄は、 `padding-top$p と同じ 【なので，この訳では省略する】。
◎ Name: padding Value: <'padding-top'>{1,4} Initial: 0 Applies to: all elements except: internal table elements other than table cells, ruby base containers, and ruby annotation containers Inherited: no Percentages: refer to logical width of containing block Computed value: see individual properties Canonical order: per grammar Animation type: by computed value type`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 in a single declaration.
一連の成分~値は、 ~paddingの各~側を`時計回りに設定する$。 ◎ If there is only one component value, it applies to all sides. If there are two values, the top and bottom padding are set to the first value and the right and left padding 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.
いくつかの~padding宣言をデモる~code： ◎ The following code demonstrates some possible padding declarations.
body { padding: 2em } /*
すべての側の~paddingを `2em^v に設定する
◎
all padding set to 2em
*/
body { padding: 1em 2em } /*
上端, 下端 =`1em^v, 右端, 左端 =`2em^v
◎
top & bottom = 1em, right & left = 2em
*/
body { padding: 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 {
padding-top: 1em;
padding-right: 2em;
padding-bottom: 3em;
padding-left: 2em; /*
反対~側（右端）から複製される
◎
copied from opposite side (right)
*/
}
5. ~border
`~border@ は、 ~boxの各~辺を視覚的に~~描き出すために`~border区画$を埋める。 各種 `~border~prop@ は、 ~boxの`~border区画$の太さ, および それを描くときの~style, 色を指定する。 これらの~propの各種［ `物理的$な下位prop／`~flow相対$な下位prop ］の定義は、 `CSS-BORDERS-4$r `§ ~border＠~CSSBORDER#borders$ を見よ。 ［ 前者, 後者 ］どちらの~prop群も， 同じ各~側の~borderを制御する — それらは、 各~側を異なる下位propで指しているに過ぎない。 ◎ Borders fill the border area, to visually delineate the edges of the box, The border properties specify the thickness of the border area of a box, as well as its drawing style and color. See CSS Backgrounds 3 §3 Borders for the definition of the physical variants of these properties; CSS Logical Properties 1 §4.5 Flow-Relative Borders additionally defines flow-relative border longhands. Both sets of properties control the same set of borders: they are just different ways of indexing each side.
変更点
- `2024年 4月 1日 作業草案＠~TR/2024/WD-css-box-4-20240401/$ からの変更点 ◎ Changes since the 1 April 2024 Working Draft include:
- `margin-trim$p において［ `block^v ~keyword, `inline^v ~keyword ］を組合せることを許容した 【が、今や，各種 `inline-*^v ~keywordは廃された】。 （ `7884$issue ） ◎ Allowing combining the block and inline keywords of margin-trim. (Issue 7884)
- 用語［ `形状付けられた辺$, `形状付けられない辺$ ］を導入した — それらの概念を他から参照し易くするため。 （ `5132$issue ） ◎ Introducing the shaped edge and unshaped edge terms for easier cross-referencing of those concepts. (Issue 5132)
- `2022年 11月 3日 作業草案＠~TR/2022/WD-css-box-4-20221103/$ からの変更点： ◎ 6. Recent Changes ◎ Changes since the 3 November 2022 Working Draft include:
- `margin-trim$p による浮動体に対する効果を除去した — それらに対し~marginを削る利用事例, 削らない利用事例どちらもあり、 実装するのも複雑なので。 （ `8547$issue ） ◎ Removing the effect of margin-trim on floats, because there are use cases for both trimming and not trimming their margins, and it is complicated to implement. (Issue 8547)
- `margin-trim$p により削られた~marginと相殺される~marginのうち削られるものは、 自身や同胞の~marginではなく，子孫の~marginに限られることを明確化した。 ◎ Clarifying that only descendant margins are trimmed by margin-trim even if self or sibling margins would have collapsed with the trimmed margin.
- `~box$の`辺$に関する用語［ `形状付けられた辺$, `形状付けられない辺$ ］を導入した。 （ `5132$issue ） ◎ Introducing terms for the shaped and unshaped edges of a box. (Issue 5132)
-
`~level 3＠~TR/css-box-3/$cite
からの変更点
◎
7. Changes Since CSS Level 3
◎
The following changes have been made to this module since Level 3:
- `margin-trim$p ~propを追加した。 ◎ Adding the margin-trim property.
- `CSS2$r `§ ~box~model＠~CSS22/box.html$ からの変更点 ◎ 8. Changes Since CSS Level 2 ◎ The following changes have been made to this module since Level 2:
- `縦組み$も織り込むよう，注釈文を少し順応させた。 ◎ Adapting the prose slightly to account for vertical writing modes.
- `margin$p, `padding$p, それらの下位propによる［ `~ruby基底~容器$, `~ruby注釈~容器$ ］に対する適用可否を定義した。 ◎ Defining the applicability of margin, padding and their longhands to ruby base containers and ruby annotation containers
~privacyの考慮点
この~moduleに対し報告された~privacyの考慮点は無い。 ◎ No privacy considerations have been reported on this module.
~securityの考慮点
この~moduleに対し報告された~securityの考慮点は無い。 ◎ No security considerations have been reported on this module.