1. 導入
この小節は規定ではありません。
CSSは、ソース文書内の各要素やテキストの各文字列が 要素ツリーを ボックスの集合へ 変換してレイアウトされる方法を記述します。 そのサイズ、位置、キャンバス上の積み重ね順は、 それぞれのCSSプロパティ値によって決まります。
注: CSSカスケードと継承は ボックスツリー内の要素へのプロパティの割り当て方法を定義し、 CSS Display 3 § 1 導入は 要素ツリーが ボックスツリーへ どのように変換されるかを説明しています。
各CSSボックスは 長方形のコンテンツ領域、 コンテンツの周囲のパディング帯、 パディングの周囲の境界線（ボーダー）、 境界線の外側のマージンを持ちます。 サイズ指定プロパティ [css-sizing-3]や レイアウトを制御するその他のプロパティが コンテンツ領域のサイズを定義します。 ボックスのスタイリングプロパティ—paddingおよびそのロングハンド、 borderおよびそのロングハンド、 marginおよびそのロングハンド—が これら他の領域のサイズを定義します。 マージンとパディングは本モジュールで定義され、 ボーダーは[css-backgrounds-3]で定義されています。
注: このモジュールは当初 ボックス生成（現在は[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辺が ボックスのマージンボックスを定義し、 これはボックスのすべてのコンテンツ、 パディング、 ボーダー、 マージン領域を含みます。
border-radiusなどのプロパティは、描画やクリッピングに使うボックスのエッジの形状を変えることができます（CSS Backgrounds 3 § 4.3 コーナークリッピング参照）。 これらの効果は通常レイアウトには影響しません。 区別するため、仕様では該当するshaped edge（形状付きエッジ）またはunshaped edge（形状なしエッジ）を参照できます。
2.2. 分断
ボックスが分断されるとき―行やページをまたいで、個別のボックス断片に分かれる場合― そのボックスの（content box、padding box、border box、margin box）も分断されます。 コンテンツ／パディング／ボーダー／マージン領域が分断にどう反応するかは[css-break-4]で定義され、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ビューポートの原点ボックスを指します。 これはSVGビューポートの幅と高さを持つ長方形で、 左上隅が座標系の原点に固定されます。 （CSSボックスの場合はborder-boxとして扱われます。）
便宜のため、以下の値型は<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ロングハンドを定義します； CSS Logical Properties 1 § 4.2 フロー相対マージン：margin-block-start, margin-block-end, margin-inline-start, margin-inline-endプロパティおよびmargin-block・margin-inlineショートハンドでは さらにフロー相対marginロングハンドも定義されます。 どちらのプロパティセットも同じマージンを制御します： 単に各辺のインデックス方法が異なるだけです。
注: ブロックレイアウトで隣接するマージンは 折りたたまれます。 詳細はCSS2§8.3.1 マージンの折り畳みを参照してください。 また、分断点に隣接するマージンは 省略される場合があります。 詳細はCSS Fragmentation 4 § 5.2 分断点での隣接マージン：margin-breakプロパティを参照してください。
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プロパティには負の値も許可されていますが、実装依存の制限がある場合があります。
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; /* 反対側（右）をコピー */
}
3.3. コンテナ端でのマージン：margin-trimプロパティ
| 名前: | margin-trim |
|---|---|
| 値: | none | [ block || inline ] | [ block-start || inline-start || block-end || inline-end ] |
| 初期値: | none |
| 適用対象: | ブロックコンテナ、マルチカラムコンテナ、フレックスコンテナ、グリッドコンテナ |
| 継承: | しない |
| パーセンテージ: | 該当なし |
| 算出値: | トリミングする辺を示す0～4個のキーワード集合 |
| 正規順序: | 文法による |
| アニメーション型: | 離散値 |
しばしば、兄弟要素間にはマージンが必要ですが、コンテナの先頭や末尾ではパディングで間隔を制御できるためマージンが不要な場合があります。このプロパティは、コンテナの端に隣接する子のマージンをコンテナ側でトリミング（削除）できます。値の意味は以下の通りです：
- none
-
マージンはコンテナによってトリミングされません。
注: ただし、ブロックレイアウトでは、子のマージンが親と折り畳まれることがあります。CSS2§8.3.1: マージンの折り畳み参照。
- block-start
- inline-start
- inline-end
- block-end
- inline-start
- このボックス内に含まれるインフローのボックスについて、指定されたエッジに隣接するマージンは0に切り詰められます。さらに、こうしたマージンと折り畳まれた子孫のマージンも切り詰めます（ただし自身、兄弟、祖先のマージンは除く）。
- block
- block-start block-endに算出されます。
- inline
- inline-start inline-endに算出されます。
注: 最短シリアライズ原則に従い、算出値がblockやinlineと同等の場合、それらのキーワードでシリアライズされます。
隣接判定はボックスアラインメント[CSS-ALIGN-3]によるスペースの影響は受けず、 折り畳まれたボックス（CSS Flexbox 1 § 4.4 折り畳まれた項目参照） やトラック（CSS Grid Layout 1 § 7.2.3.2 Repeat-to-fill: auto-fill、auto-fit繰り返し）は無視されます。
注: margin-breakプロパティも参照。 これはボックス自身のマージンが分断点（改ページ／カラム分割など）に隣接する場合に適用されます。
このプロパティが、ボックスが分断コンテキストを確立する場合、分断点でのマージンにどう影響するか定義すること。 Issue 3314も参照。
注: このプロパティは、ブロックコンテナで指定した場合、floatのマージンには影響しません。 将来のモジュールレベルでfloat専用の制御が導入される可能性があります。
3.3.1. ブロックコンテナコンテンツのトリミング
ブロックコンテナに特化して、margin-trim は以下を破棄します：
- block-startエッジをトリミングする場合、ブロックレベルの最初の子のblock-startマージン
- block-endエッジをトリミングする場合、ブロックレベルの最後の子のblock-endマージン
- これらのマージンと折り畳まれたマージン
これはインライン軸のマージンやインラインレベル子孫のマージンには影響しません。
3.3.2. フレックスコンテナコンテンツのトリミング
フレックスコンテナに特化して、margin-trim は以下を破棄します：
- メイン軸に平行なエッジをトリミングする場合、最も近いフレックスライン上の各フレックスアイテムの該当マージン
- クロス軸に平行なエッジをトリミングする場合、各フレックスラインの最初／最後のフレックスアイテムの該当マージン
この処理では折り畳まれたフレックスアイテムは無視します。
3.3.3. グリッドコンテナコンテンツのトリミング
グリッドコンテナに特化して、margin-trim は、 該当ボックスエッジに隣接するグリッドトラック内の各グリッドアイテムの該当マージンを破棄します。
この処理では折り畳まれたグリッドトラックは無視しますが、空のグリッドトラックは他に無視しません。
4. パディング
パディングは、コンテンツエッジとパディングエッジの間に挿入され、 コンテンツとボーダーの間にスペースを提供します。 パディングプロパティは、 ボックスのパディング領域の厚みを指定します。 paddingショートハンドプロパティは4辺すべてのパディングを設定し、 パディングロングハンドプロパティは各辺のみを設定します。 この仕様は物理的paddingロングハンドを定義します； CSS Logical Properties 1 § 4.4 フロー相対パディング：padding-block-start, padding-block-end, padding-inline-start, padding-inline-endプロパティおよびpadding-block・padding-inlineショートハンドでは さらにフロー相対paddingロングハンドも定義されます。 どちらのプロパティセットも同じパディングを制御します： 単に各辺のインデックス方法が異なるだけです。
注: ボックスに指定された背景は デフォルトでパディングエッジ内にレイアウト・描画されます。 （さらにボーダーの下にも描画されます。 ボーダー領域内です。） この挙動は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 |
これらのプロパティはそれぞれ、ボックスの上・右・下・左のパディングを設定します。
パディングプロパティに負の値を指定することはできません。
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 § 3 Bordersを参照してください；CSS Logical Properties 1 § 4.5 Flow-relative Bordersでは さらにフロー相対のボーダーロングハンドも定義されています。 どちらのプロパティセットも同じボーダーを制御します： 単に各辺のインデックス方法が異なるだけです。
6. 最近の変更
2024年4月1日作業草案以降の変更：
-
blockおよびinlineキーワード（margin-trim）を組み合わせ可能にした。 (Issue 7884)
-
shaped edgeおよびunshaped edge用語を導入し、相互参照を容易にした。 (Issue 5132)
2022年11月3日作業草案以降の変更：
-
margin-trimによるfloatへの影響を削除。 floatのマージンをトリミングする場合としない場合両方のユースケースがあり、実装が複雑であるため。 (Issue 8547)
-
自己や兄弟のマージンが折り畳まれても、margin-trimで子孫のマージンのみがトリミングされることを明確化。
-
shaped・unshapedエッジ用語を導入。 (Issue 5132)
7. CSS Level 3以降の変更点
本モジュールはLevel 3以降、以下の変更が加えられました：
- margin-trimプロパティの追加。
8. CSS Level 2以降の変更点
本モジュールはLevel 2以降、以下の変更が加えられました：
9. プライバシーに関する考慮事項
本モジュールに関するプライバシーに関する考慮事項は報告されていません。
10. セキュリティに関する考慮事項
本モジュールに関するセキュリティに関する考慮事項は報告されていません。