目次
CSSボックスモデルは、文書ツリー内の要素に対して生成され、視覚整形モデルに従ってレイアウトされる矩形ボックスについて説明する。
各ボックスは、コンテンツ領域（たとえば、テキスト、画像など）と、パディング、ボーダーおよびマージンの周辺領域をオプションで持つ。各領域の大きさは、以下で定義されるプロパティによって指定される。次の図は、どのようにこれら領域が関連するか、およびマージン、ボーダー、パディングを参照するために使用される用語を示す：
マージン、ボーダー、およびパディングは、上下左右の区分に分解することができる（たとえば図において、"LM"は左マージン、右パディングは"RP"、上ボーダーは"TB"を表す）。
4つの領域の各境界（コンテンツ、パディング、ボーダー、マージン）は"辺"と呼ばれ、各ボックスは4つの辺を持つ：
各辺は、上下左右の辺に分解されてもよい。
ボックスのコンテンツ領域の次元―コンテンツ幅とコンテンツ高さ―は、複数の要因に依存する。これは、ボックスを生成する要素が'width'または'height'プロパティセットを持つかどうか、ボックスがテキストまたは他のボックスが含むかどうか、ボックスがテーブルであるかどうかなどである。ボックスの幅と高さは、視覚整形モデルの詳細の章で説明される。
ボックスのコンテンツ、パディングおよびボーダー領域の背景スタイルは、生成要素の'background'プロパティによって指定される。マージンの背景は常に透明である。
この例は、マージン、パディング、およびボーダーがどのように相互作用するかを示す。たとえば、次のHTML文書で：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Examples of margins, padding, and borders</TITLE>
<STYLE type="text/css">
UL {
background: yellow;
margin: 12px 12px 12px 12px;
padding: 3px 3px 3px 3px;
/* ボーダーを設定しない */
}
LI {
color: white; /* テキストの色は白 */
background: blue; /* コンテンツ領域とパディング領域は青 */
margin: 12px 12px 12px 12px;
padding: 12px 0px 12px 12px; /* 右パディングが0 */
list-style: none /* リストには印を付けない */
/* ボーダーを設定しない */
}
LI.withborder {
border-style: dashed;
border-width: medium; /* すべての辺にボーダーを設定 */
border-color: lime;
}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>First element of list
<LI class="withborder">Second element of list is
a bit longer to illustrate wrapping.
</UL>
</BODY>
</HTML>
（他の関係の間で）2つのLIの子を持つUL要素を伴なう文書ツリーをもたらす。
以下の1つ目の図は、この例が生成するものを示す。2つ目の図は、マージン、パディング、およびUL要素のボーダーとその子のLI要素の関係を示す。（画像は拡大したものではない。）
注意点：
マージンのプロパティは、ボックスのマージン領域の幅を指定する。'margin'略式プロパティは、4辺すべてのマージンを設定する。一方、他のマージンのプロパティは、それぞれの辺のみを設定する。これらのプロパティは、すべての要素に適用されるが、垂直方向のマージンは、非置換インライン要素には何の影響も与えない。
この節で定義されるプロパティは、<margin-width>値型を参照し、次のいずれかの値を取ってもよい：
マージンのプロパティに負の値は許可されるが、実装固有の制限があるかもしれない。
| プロパティ名： | margin-top, margin-bottom |
|---|---|
| 値： | <margin-width> | inherit |
| 初期値： | 0 |
| 適用要素： | table-caption、table、inline-table以外のテーブルdisplayタイプを持つ要素を除くすべての要素 |
| 継承： | no |
| パーセンテージ： | 包含ブロックを含む幅を参照 |
| メディア： | visual |
| 算出値： | 指定値のパーセンテージまたは絶対長さ |
これらのプロパティは、非置換インライン要素に影響を与えない。
| プロパティ名： | margin-right, margin-left |
|---|---|
| 値： | <margin-width> | inherit |
| 初期値： | 0 |
| 適用要素： | table-caption、table、inline-table以外のテーブルdisplayタイプを持つ要素を除くすべての要素 |
| 継承： | no |
| パーセンテージ： | 包含ブロックを含む幅を参照 |
| メディア： | visual |
| 算出値： | 指定値のパーセンテージまたは絶対長さ |
これらのプロパティは、ボックスの上下左右のマージンを設定する。
h1 { margin-top: 2em }
| プロパティ名： | margin |
|---|---|
| 値： | <margin-width>{1,4} | inherit |
| 初期値： | 個々のプロパティを参照 |
| 適用要素： | table-caption、table、inline-table以外のテーブルdisplayタイプを持つ要素を除くすべての要素 |
| 継承： | no |
| パーセンテージ： | 包含ブロックを含む幅を参照 |
| メディア： | visual |
| 算出値： | 個々のプロパティを参照 |
'margin'プロパティは、'margin-top'、'margin-right'、'margin-bottom'、'margin-left'の略式プロパティで、これらをスタイルシートの同じ場所で設定できる。
1つのコンポーネント値のみである場合、4辺すべてに適用される。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; /* 反対側（右）からコピー */
}
CSSにおいて、（兄弟であるかもしれないし、そうでないかもしれない）2つ以上のボックスの隣接するマージンは、単一のマージンを形成するために組み合わせることができる。このように結び付けるマージンは相殺すると呼ばれ、結びつけられたマージンの結果は、相殺マージンと呼ばれる。
隣接する垂直マージンは相殺する。ただし：
水平方向のマージンは相殺しない。
2つのマージンが隣接する場合かつその場合に限り：
構成マージンのいずれかがそのマージンに隣接する場合、相殺マージンは別のマージンに隣接するとみなされる。
注。 隣接するマージンは、兄弟や祖先のような関連しない要素によって生成することができる。
注 上記の規則は以下の意味を含む：
2つ以上のマージンが相殺する場合、マージンの幅の結果は、相殺するマージンの幅の最大値である。負のマージンの場合、負の隣接するマージンの絶対値の最大値が、正の隣接するマージンの最大値から差し引かれる。正のマージンが存在しない場合、隣接するマージンの絶対値の最大値が0から差し引かれる。
ボックスの上下マージンが隣接する場合、マージンがボックスを通して相殺する可能性がある。この場合、要素の位置はマージンが相殺された他の要素との関係に依存する。
相殺している要素の位置は、マージンとともに他の要素の位置に影響を与えないことに注意する。上ボーダー辺の位置は、その要素の子孫をレイアウトするためのみに要求される。
パディングのプロパティは、ボックスのパディング領域の幅を指定する。'padding'略式プロパティは、4辺すべてにパディングを設定する。一方、他のパディングのプロパティは、それぞれの辺のみを設定する。
この節で定義されるプロパティは、<padding-width>値型を参照し、次のいずれかの値を取ってもよい：
マージンのプロパティとは異なり、パディングの値は負にすることができない。マージンのプロパティと同様に、パディングのプロパティのパーセント値は、生成ボックスの包含ブロックの幅を参照する。
| プロパティ名： | padding-top, padding-right, padding-bottom, padding-left |
|---|---|
| 値： | <padding-width> | inherit |
| 初期値： | 0 |
| 適用要素： | table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-columnを除くすべての要素 |
| 継承： | no |
| パーセンテージ： | 包含ブロックを含む幅を参照 |
| メディア： | visual |
| 算出値： | 指定値のパーセンテージまたは絶対長さ |
これらのプロパティは、ボックスの上下左右のパディングを設定する。
blockquote { padding-top: 0.3em }
| プロパティ名： | padding |
|---|---|
| 値： | <padding-width>{1,4} | inherit |
| 初期値： | 個々のプロパティを参照 |
| 適用要素： | table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-columnを除くすべての要素 |
| 継承： | no |
| パーセンテージ： | 包含ブロックを含む幅を参照 |
| メディア： | visual |
| 算出値： | 個々のプロパティを参照 |
'padding'プロパティは、スタイルシートの同じ場所で'padding-top'、'padding-right'、'padding-bottom'、'padding-left'を設定するための略式プロパティである。
1つのコンポーネント値のみである場合、4辺すべてに適用される。2つの値が存在する場合、1つ目の値が上下のパディング、2つ目の値が左右のパディングに適用される。 3つの値が存在する場合、1つ目の値が上、2つ目の値が左右に、3つ目の値が下に設定される。4つの値が存在する場合、それぞれ、上、右、下、左の順に適用される。
パディング領域の表面色や画像は、'background'プロパティを通して指定する：
h1 {
background: white;
padding: 1em 2em;
}
この例は、垂直方向のパディング（'padding-top'と'padding-bottom'）を'1em'に、水平方向のパディング（'padding-right'と'padding-left'）を'2em'に設定する。'em'単位は、要素のフォントサイズに対して相対的である。'1em'は使用中のフォントサイズと等しい。
ボーダーのプロパティは、ボックスのボーダー領域の幅、色、種類を指定する。このプロパティは、すべての要素に適用される。
注。 特にHTMLに対して、ユーザーエージェントは、特定のユーザーインターフェイス要素（たとえば、ボタン、メニューなど）に対するボーダーにを"よく目にする"要素と異なる方法でレンダリングしてもよい。
このプロパティはボーダー領域の幅を指定する。この節で定義されたプロパティは、<border-width> 値型を参照し、次のいずれかの値を取ってもよい：
最初の3つの値の解釈は、ユーザーエージェントに依存する。しかし、次の関係は保持しなければならない：
'thin' <='medium' <= 'thick'.
さらに、これらの幅は文書を通して一定でなければならない。
| プロパティ名： | border-top-width, border-right-width, border-bottom-width, border-left-width |
|---|---|
| 値： | <border-width> | inherit |
| 初期値： | medium |
| 適用要素： | すべての要素 |
| 継承： | no |
| パーセンテージ： | 利用不可 |
| メディア： | visual |
| 算出値： | 絶対長さ。ボーダーの種類が'none'または'hidden'の場合、'0'とする。 |
これらのプロパティは、ボックスの上下左右のボーダーを設定する。
| プロパティ名： | border-width |
|---|---|
| 値： | <border-width>{1,4} | inherit |
| 初期値： | 個々のプロパティを参照 |
| 適用要素： | すべての要素 |
| 継承： | no |
| パーセンテージ： | 利用不可 |
| メディア： | visual |
| 算出値： | 個々のプロパティを参照 |
これは、スタイルシートの同じ場所で'border-top-width'、'border-right-width'、'border-bottom-width'、'border-left-width'を設定するための略式プロパティである。
1つのコンポーネント値のみである場合、4辺すべてに適用される。2つの値が存在する場合、1つ目の値が上下のボーダーに設定され、2つ目の値が左右のボーダーに設定される。3つの値が存在する場合、1つ目の値が上、2つ目の値が左右に、3つ目の値が下に設定される。4つの値が存在する場合、それぞれ、上、右、下、左の順に適用される。
以下の例で、コメントは上、右、下、左ボーダー幅の結果を示す：
h1 { border-width: thin } /* thin thin thin thin */
h1 { border-width: thin thick } /* thin thick thin thick */
h1 { border-width: thin thick medium } /* thin thick medium thick */
このプロパティは、ボックスのボーダーの色を指定する。
| プロパティ名： | border-top-color, border-right-color, border-bottom-color, border-left-color |
|---|---|
| 値： | <color> | transparent | inherit |
| 初期値： | 'color'プロパティの値 |
| 適用要素： | すべての要素 |
| 継承： | no |
| パーセンテージ： | 利用不可 |
| メディア： | visual |
| 算出値： | 'color'プロパティから取られる場合、'color'の算出値。そうでなければ、指定値。 |
| プロパティ名： | border-color |
|---|---|
| 値： | [ <color> | transparent ]{1,4} | inherit |
| 初期値： | 個々のプロパティを参照 |
| 適用要素： | すべての要素 |
| 継承： | no |
| パーセンテージ： | 利用不可 |
| メディア： | visual |
| 算出値： | 個々のプロパティを参照 |
'border-color'プロパティは、4辺のボーダーの色を設定する。値は次の意味を持つ：
'border-color'プロパティは、1つから4つまでの値を持つことができ、その値は 'border-width'と関係なく設定される。
要素のボーダーの色がborderプロパティで指定されない場合、ユーザーエージェントはボーダーの色の算出値として、要素の'color'プロパティの値を使用しなければならない。
この例において、ボーダーは黒い実線になる。
p {
color: black;
background: white;
border: solid;
}
このプロパティは、ボックスのボーダーの種類（実線、二重、破線など）を指定する。この節で定義されるプロパティは、<border-style>値型を参照し、次のいずれかの値を取ってもよい：
すべてのボーダーは、ボックスの背景の上に描画される。'groove'、'ridge'、'inset'、'outset'の値に対して描画されるボーダーの色は、'border-color'プロパティに依存するが、ユーザーエージェントは実際に使用する色を計算するために、独自のアルゴリズムを選択してもよい。たとえば、'border-color'の値が'silver'である場合、ユーザーエージェントは傾斜したボーダーを示すために、白からダークグレイのグラデーションを使用するかもしれない。
| プロパティ名： | border-top-style, border-right-style, border-bottom-style, border-left-style |
|---|---|
| 値： | <border-style> | inherit |
| 初期値： | none |
| 適用要素： | すべての要素 |
| 継承： | no |
| パーセンテージ： | 利用不可 |
| メディア： | visual |
| 算出値： | 指定される |
| プロパティ名： | border-style |
|---|---|
| 値： | <border-style>{1,4} | inherit |
| 初期値： | 個々のプロパティを参照 |
| 適用要素： | すべての要素 |
| 継承： | no |
| パーセンテージ： | 利用不可 |
| メディア： | visual |
| 算出値： | 個々のプロパティを参照 |
'border-style'プロパティは、4辺のボーダーの種類を設定する。1つから4つまでの値を持つことができ、その値は'border-width'と関係なく設定される。
#xy34 { border-style: solid dotted }
上の例において、上下のボーダーは実線に、左右のボーダーは点線になる。
ボーダーの種類の初期値は'none'であるため、ボーダーの種類を設定しない限り、ボーダーは見えない。
| プロパティ名： | border-top, border-right, border-bottom, border-left |
|---|---|
| 値： | [ <border-width> || <border-style> || <'border-top-color'> ] | inherit |
| 初期値： | 個々のプロパティを参照 |
| 適用要素： | すべての要素 |
| 継承： | no |
| パーセンテージ： | 利用不可 |
| メディア： | visual |
| 算出値： | 個々のプロパティを参照 |
これは、ボックスの上下左右のボーダーの幅、種類、色を設定するための略式プロパティである。
h1 { border-bottom: thick solid red }
上記の規則は、H1要素の下ボーダーの幅、種類、色を設定する。省略された値には、初期値が設定される。次の規則はボーダーの色を指定しないので、ボーダーは'color'プロパティで指定された色を持つ：
H1 { border-bottom: thick solid }
| プロパティ名： | border |
|---|---|
| 値： | [ <border-width> || <border-style> || <'border-top-color'> ] | inherit |
| 初期値： | 個々のプロパティを参照 |
| 適用要素： | すべての要素 |
| 継承： | no |
| パーセンテージ： | 利用不可 |
| メディア： | visual |
| 算出値： | 個々のプロパティを参照 |
'border'プロパティは、ボックスの4つのすべてのボーダーを同じ幅、色、種類に設定するための略式プロパティである。'margin'および'padding'略式プロパティとは異なり、'border'プロパティは4つのボーダーに異なる値を設定できない。そのようにする場合、1つ以上の他のボーダープロパティを使用しなければならない。
たとえば、以下の最初の規則は、その後に示す4つの規則と等価である：
p { border: solid red }
p {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
ボーダーのプロパティはある程度機能が重複しているので、規則を指定する順序が重要である。
次のような例を考えてみよう：
blockquote {
border: solid red;
border-left: double;
color: black;
}
上記の例において、左ボーダーの色は黒であり、他のボーダーは赤である。これは、'border-left'が幅、種類、色を設定してしまうためである。色の値は'border-left'プロパティで指定されないため、'color'プロパティから取得される。'color'プロパティが'border-left'プロパティの後に設定されていることは何の関係もない。
それぞれの行ボックスに対して、ユーザーエージェントは各要素に対して生成されたインラインボックスを取らなければならず、（論理的な順序でなく）視覚的な順序でマージン、ボーダー、パディングをレンダリングしなければならない。
要素の'direction'プロパティが'ltr'である場合、要素が出現する最初の行ボックスの一番左の生成されるボックスは、左マージン、左ボーダーおよび左パディングを持ち、要素が出現する最後の行の一番右に生成されるボックスは、右パディング、右ボーダーおよび右のマージンを持つ。
要素の'direction'プロパティが'rtl'である場合、要素が出現する最初の行ボックスの一番右に生成されるボックスは、右パディング、右ボーダーおよび右マージンを持ち、要素が出現する最後の行の一番左に生成されるボックスは、左マージン、左ボーダーおよび左パディングを持つ。