1. 導入
この小節は規定ではありません。
CSSは、ソース文書内の各要素やテキストの各文字列が 要素ツリーを ボックスの集合へ 変換してレイアウトされる方法を記述します。 そのサイズ、位置、キャンバス上の積み重ね順は、 それぞれのCSSプロパティ値によって決まります。
注: CSSカスケードと継承は ボックスツリー内の要素へのプロパティの割り当て方法を定義し、 CSS Display 3 § 1 導入は 要素ツリーが ボックスツリーへ どのように変換されるかを説明しています。
各CSSボックスは 長方形のコンテンツ領域、 コンテンツの周囲のパディング帯、 パディングの周囲の境界線（ボーダー）、 境界線の外側のマージンを持ちます。 サイズ指定プロパティ [css-sizing-3]や レイアウトを制御するその他のプロパティが コンテンツ領域のサイズを定義します。 ボックスのスタイリングプロパティ—paddingおよびそのロングハンド、 borderおよびそのロングハンド、 marginおよびそのロングハンド—が これら他の領域のサイズを定義します。
マージンおよび パディングは本モジュールで定義されます。 ボーダーは [css-backgrounds-3]で 同様に定義されています。
注: 本モジュールは物理的な各辺ごとのロングハンドプロパティのみを定義します。 追加のフロー相対ロングハンドプロパティは [css-logical-1]で定義されています。 どちらのロングハンドプロパティも同じ マージン/パディングを制御します。 単に各辺のインデックス方法が異なるだけです。
CSS Boxモジュールの歴史とブロックレイアウト定義について
このモジュールは 当初 ボックス生成（現在は[css-display-3]で定義）、 ボックスモデル（本書で定義）、 そしてブロックレイアウト（現在は[CSS2]の第9章、第10章のみで定義） に関するCSSレベル3の仕様本文を含んでいました。 CSS2.1の開発中に保守が中断されたため、 CSS2リビジョン1が最終的に完成した頃には 本文は大幅に古くなっていました。 そのため、ブロックレイアウト部分の本文は退役となり、 将来新しいBlock Layoutモジュールへのインプットとして CSS2と同期し直してアップデートされる予定です。 実務的な理由（膨大な作業量）、CSSが複数のレイアウトモデル （Flex Layout、 Grid Layout、 Positioned Layout、 Table Layout、 そしてブロックレイアウト）を 持つようになったことから、 本モジュールやCSS Display Moduleから 分離されています。それぞれが独自の並列モジュールとして定義される価値があるためです。
1.1. 値の定義
この仕様はCSSプロパティ定義の慣習と [CSS2]を、 値定義構文は [CSS-VALUES-3]を それぞれ踏襲しています。 この仕様で定義されていない値型はCSS Values & Units [CSS-VALUES-3]で定義されています。 他のCSSモジュールとの組み合わせでこれらの値型の定義が拡張される場合があります。
各プロパティ固有の値に加え、 この仕様で定義されるすべてのプロパティは CSS全体キーワードも値として受け付けます。 可読性のため、ここでは繰り返し明記していません。
1.2. モジュールの相互作用
このモジュールは [CSS2]の セクション8.1、8.2、8.3（8.3.1は除く）、8.4で定義されていた marginおよびpaddingプロパティの定義を置き換えます。
このモジュール内のすべてのプロパティは ::first-lineおよび ::first-letter 疑似要素にも適用されます。
2. CSSボックスモデル
各ボックスは コンテンツ領域 （テキスト、子孫ボックス、画像やその他の置換要素コンテンツなどが含まれる）と、 オプションの周囲の パディング、 ボーダー、 マージン領域 を持ちます。 各領域のサイズは対応するプロパティによって指定され、 ゼロ（マージンの場合は負）にもできます。 下図は、これら領域の関係とボックスの各部位を指す用語を示しています:
典型的なボックスの各領域と各エッジ。
ボックスのコンテンツ、パディング、ボーダー領域の背景は backgroundプロパティで指定されます。 ボーダー領域にはさらに border プロパティで境界線を描画することもできます。 マージンは常に透明です。 詳細は[css-backgrounds-3]を参照してください。
マージン、ボーダー、パディングは 上、右、下、左の各セグメントに分割でき、 それぞれ対応するプロパティで個別に制御できます。
2.1. ボックスとエッジ
各4領域 （コンテンツ、パディング、ボーダー、マージン） の外周はエッジと呼ばれ、 各エッジは 上、右、下、左の各辺に分けられます。 つまり、各ボックスは それぞれ4つのエッジ（各エッジは4つの辺で構成）を持ちます:
- コンテンツエッジ または 内側エッジ
- コンテンツエッジは、 ボックスの幅と高さで与えられる長方形を囲みます。 このサイズはしばしば要素の内容や 包含ブロックのサイズに依存します。 コンテンツエッジの4辺が ボックスのコンテンツボックスを定義します。
- パディングエッジ
- パディングエッジはボックスのパディングを囲みます。 ある辺のパディング幅がゼロの場合、 その辺ではパディングエッジはコンテンツエッジと一致します。 パディングエッジの4辺が ボックスのパディングボックスを定義し、 これはコンテンツとパディング領域の両方を含みます。
- ボーダーエッジ
- ボーダーエッジはボックスのボーダーを囲みます。 ある辺のボーダー幅がゼロの場合、 その辺ではボーダーエッジはパディングエッジと一致します。 ボーダーエッジの4辺が ボックスのボーダーボックスを定義し、 これはボックスのコンテンツ、パディング、 ボーダー領域を含みます。
- マージンエッジ または 外側エッジ
- マージンエッジはボックスのマージンを囲みます。 ある辺のマージン幅がゼロの場合、 その辺ではマージンエッジはボーダーエッジと一致します。 マージンエッジの4辺が ボックスのマージンボックスを定義し、 これはボックスのすべてのコンテンツ、 パディング、 ボーダー、 マージン領域を含みます。
2.2. 分断
ボックスが分断される場合—行やページをまたいで、個別のボックス断片に分かれる場合—そのボックスの (content box, padding box, border box, margin box) も分断されます。 コンテンツ／パディング／ボーダー／マージン領域が分断にどのように反応するかは[css-break-3]で定義されており、box-decoration-breakプロパティで制御されます。
2.3. ボックスエッジのキーワード
以下の<box> CSSキーワードは、 （transform-boxやbackground-clipなど） さまざまなボックスエッジを参照する必要があるプロパティで利用するために定義されています：
- content-box
- content box または content edgeを指します。 （SVGの場合はfill-boxとして扱われます。）
- padding-box
- padding box または padding edgeを指します。 （SVGの場合はfill-boxとして扱われます。）
- border-box
- border box または border edgeを指します。 （SVGの場合はstroke-boxとして扱われます。）
- margin-box
- margin box または margin edgeを指します。 （SVGの場合はstroke-boxとして扱われます。）
- fill-box
- object bounding boxまたはそのエッジを指します。 （CSSボックスの場合はcontent-boxとして扱われます。）
- stroke-box
- stroke bounding boxまたはそのエッジを指します。 （CSSボックスの場合はborder-boxとして扱われます。）
- view-box
-
最も近いSVGビューポート要素の原点ボックスを指します。
これは、その要素の
viewBox属性で確立された初期SVGユーザー座標系の幅と高さを持つ長方形です。 左上隅が座標系の原点に固定されます。 （CSSボックスの場合はborder-boxとして扱われます。）注:
viewBoxに非ゼロのmin-xやmin-yオフセットが含まれる場合、 この原点ボックスはviewBoxで定義される可視領域の長方形とは一致しません！
便宜上、以下の値型は<box>のよく使われる部分集合を表すために定義されています：
<visual-box> = content-box | padding-box | border-box <layout-box> = <visual-box> | margin-box <paint-box> = <visual-box> | fill-box | stroke-box <coord-box> = <paint-box> | view-box
3. マージン
マージンは ボックスのボーダーエッジの外側に配置され、 ボックス間のスペースを提供します。 marginプロパティは、 ボックスのmargin領域の厚みを指定します。 margin ショートハンドプロパティは 4辺すべてのマージンを設定し、 marginロングハンドプロパティは各辺のみを設定します。 このセクションでは物理的margin ロングハンドを定義します。 （追加のフロー相対marginロングハンドは [css-logical-1]で定義されています。)
注: ブロックレイアウトで隣接するマージンは 折りたたまれることがあります。 詳細はCSS2§8.3.1 マージンの折り畳みを参照してください。 また、分断点に隣接するマージンは 省略される場合があります。 詳細はCSS Fragmentation 3 § 5.2 分断点での隣接マージンを参照してください。
3.1. ページ基準（物理的）マージンプロパティ：margin-top、 margin-right、 margin-bottom、 margin-leftプロパティ
| 名前: | margin-top, margin-right, margin-bottom, margin-left |
|---|---|
| 値: | <length-percentage> | auto |
| 初期値: | 0 |
| 適用対象: | すべての要素（内部テーブル要素を除く） |
| 継承: | しない |
| パーセンテージ: | 包含ブロックの論理幅を参照 |
| 算出値: | キーワードautoまたは算出された<length-percentage>値 |
| 正規順序: | 文法による |
| アニメーション型: | 算出値の型による |
| 論理プロパティグループ: | margin |
これらのプロパティはそれぞれ、ボックスの上・右・下・左のマージンを設定します。
marginプロパティには負の値も許可されていますが、実装依存の制限がある場合があります。
注: 内部ルビボックスへの適用は [CSS-RUBY-1]では定義されていません。
3.2. マージンショートハンド：marginプロパティ
| 名前: | margin |
|---|---|
| 値: | <'margin-top'>{1,4} |
| 初期値: | 0 |
| 適用対象: | 各個別プロパティを参照 |
| 継承: | しない |
| パーセンテージ: | 包含ブロックの論理幅を参照 |
| 算出値: | 各個別プロパティを参照 |
| 正規順序: | 文法による |
| アニメーション型: | 算出値の型による |
marginプロパティは、margin-top、margin-right、margin-bottom、margin-left を一括で設定するためのショートハンドプロパティです。
値が1つだけの場合、すべての辺に適用されます。 2つの場合、上と下が1つ目、右と左が2つ目の値になります。 3つの場合、上が1つ目、左と右が2つ目、下が3つ目の値になります。 4つの場合、それぞれ上・右・下・左に順番に適用されます。
body { margin: 2em } /* すべてのマージンが2em */
body { margin: 1em 2em } /* 上・下=1em、右・左=2em */
body { margin: 1em 2em 3em } /* 上=1em、右=2em、下=3em、左=2em */
上記最後のルールは、以下の例と同等です：
body {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* 反対側（右）をコピー */
}
4. パディング
パディングは、コンテンツエッジとパディングエッジの間に挿入され、 コンテンツとボーダーの間にスペースを提供します。 パディングプロパティは、 ボックスのパディング領域の厚みを指定します。 paddingショートハンドプロパティは4辺すべてのパディングを設定し、 パディングロングハンドプロパティはそれぞれの辺のみを設定します。 このセクションでは物理的padding ロングハンドを定義します。 （追加のフロー相対paddingロングハンドは [css-logical-1]で定義されています。)
注: ボックスに指定された背景は デフォルトでパディングエッジ内にレイアウト・描画されます。 （さらにボーダーの下にも描画されます。 ボーダー領域内です。） この挙動はbackground-originやbackground-clipプロパティで調整できます。
4.1. ページ基準（物理的）パディングプロパティ：padding-top、padding-right、padding-bottom、padding-leftプロパティ
| 名前: | padding-top, padding-right, padding-bottom, padding-left |
|---|---|
| 値: | <length-percentage [0,∞]> |
| 初期値: | 0 |
| 適用対象: | すべての要素（ただし、テーブルセル以外の内部テーブル要素は除く） |
| 継承: | しない |
| パーセンテージ: | 包含ブロックの論理幅を参照 |
| 算出値: | 算出された<length-percentage>値 |
| 正規順序: | 文法による |
| アニメーション型: | 算出値の型による |
| 論理プロパティグループ: | padding |
これらのプロパティはそれぞれ、ボックスの上・右・下・左のパディングを設定します。
パディングプロパティに負の値を指定することはできません。
注: 内部ルビボックスへの適用は [CSS-RUBY-1]で定義されていません。
4.2. パディングショートハンド：paddingプロパティ
| 名前: | padding |
|---|---|
| 値: | <'padding-top'>{1,4} |
| 初期値: | 0 |
| 適用対象: | 各個別プロパティを参照 |
| 継承: | しない |
| パーセンテージ: | 包含ブロックの論理幅を参照 |
| 算出値: | 各個別プロパティを参照 |
| 正規順序: | 文法による |
| アニメーション型: | 算出値の型による |
paddingプロパティは、padding-top、padding-right、padding-bottom、padding-leftを一括で設定するためのショートハンドプロパティです。
値が1つだけの場合、すべての辺に適用されます。 2つの場合、上と下が1つ目、右と左が2つ目の値になります。 3つの場合、上が1つ目、左と右が2つ目、下が3つ目の値になります。
body { padding: 2em } /* すべてのパディングが2em */
body { padding: 1em 2em } /* 上・下=1em、右・左=2em */
body { padding: 1em 2em 3em } /* 上=1em、右=2em、下=3em、左=2em */
上記最後のルールは、以下の例と同等です：
body {
padding-top: 1em;
padding-right: 2em;
padding-bottom: 3em;
padding-left: 2em; /* 反対側（右）をコピー */
}
5. ボーダー
ボーダーは ボーダー領域を埋め、 ボックスのエッジを視覚的に区切ります。 ボーダープロパティは、 ボックスのボーダー領域の厚み、 および描画スタイルと色を指定します。 これらのプロパティの定義については [css-backgrounds-3]を参照してください。 物理的なロングハンドも含まれます。 （追加のフロー相対ボーダーロングハンドは [css-logical-1]で定義されています。)
6. 変更点
6.1. 最近の変更
2023年4月6日勧告以降、編集上の微調整のみ行われました：
-
§ 2 CSSボックスモデルにいくつかの小見出しを追加し、段落を移動。
-
§ 1 導入で「document tree」を「element tree」に変更し、[css-display-3]の用語と一致させた。
-
プロパティ定義表に「Logical Property Group」行を追加。
6.2. CSS Level 2以降の変更点
このモジュールは、CSS Level 2以降、以下の変更が加えられました：
- 内部ルビボックスへの適用を本レベルでは未定義とした。
- 縦書き書字モードを考慮するため本文を微調整。
- [css-break-3]や[css-backgrounds-3]の関連する概念への相互リンクを追加。
- 各種ボックスエッジを参照するキーワードの共通定義を中央集約し、 この仕様外で定義されたプロパティ（例：background-clip）でも 冗長性（および同期ミス）を避けて利用できるようにした。
7. プライバシーに関する考慮事項
このモジュールに関して報告されたプライバシーに関する考慮事項はありません。
8. セキュリティに関する考慮事項
このモジュールに関して報告されたセキュリティに関する考慮事項はありません。