目次
CSSのボックスモデルは、文書ツリー内の要素に対して生成され、視覚フォーマットモデルに基づいてレイアウトされる矩形のボックスを説明します。
各ボックスには、 コンテンツ領域（例: テキスト、画像など）と、オプションで周囲の パディング、 ボーダー、 マージン領域があります。各領域のサイズは以下で定義されるプロパティによって指定されます。次の図は、これらの領域がどのように関連し、マージン、ボーダー、パディングの各部分を指す用語を示しています。
マージン、ボーダー、パディングは、上、右、下、左のセグメントに分割できます（図では、"LM" は左マージン、"RP" は右パディング、"TB" は上ボーダーなど）。
4つの領域（コンテンツ、パディング、ボーダー、マージン）の周囲は「エッジ」と呼ばれ、それぞれのボックスには4つのエッジがあります:
各エッジは、上、右、下、左のエッジに分割できます。
ボックスのコンテンツ領域の寸法 — コンテンツ幅およびコンテンツ高さ — は、要素が'width'または'height'プロパティを持つかどうか、ボックスがテキストや他のボックスを含むかどうか、ボックスがテーブルであるかどうかなど、いくつかの要因に依存します。ボックスの幅と高さの詳細については、視覚フォーマットモデルの詳細の章を参照してください。
ボックスのコンテンツ、パディング、およびボーダー領域の背景スタイルは、生成要素の'background'プロパティによって指定されます。マージンの背景は常に透明です。
この例は、マージン、パディング、およびボーダーがどのように相互作用するかを示しています。例のHTMLドキュメント:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>マージン、パディング、およびボーダーの例</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; /* 右側のパディングが0pxに設定されています */
list-style: none /* リストアイテムの前にグリフは表示されません */
/* ボーダーは設定されていません */
}
LI.withborder {
border-style: dashed;
border-width: medium; /* 全ての辺のボーダー幅を設定 */
border-color: lime;
}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>リストの最初の要素
<LI class="withborder">リストの2番目の要素は、
折り返しを示すために少し長くしています。
</UL>
</BODY>
</HTML>
この例は、（他の関係の中でも）UL 要素が2つの LI 子を持つ文書ツリーを生成します。
以下の図の最初のものは、この例が生成するものを示しています。2番目の図は、UL 要素のマージン、パディング、ボーダーとその子要素 LI の間の関係を示しています（画像は縮尺ではありません）。
注:
マージンプロパティは、ボックスのマージン領域の幅を指定します。'margin'ショートハンドプロパティは4辺すべてのマージンを設定しますが、他のマージンプロパティはそれぞれの辺のみを設定します。これらのプロパティはすべての要素に適用されますが、垂直方向のマージンは非置換インライン要素には影響しません。
このセクションで定義されるプロパティは、<margin-width>値タイプを参照し、以下のいずれかの値を取ります:
マージンプロパティには負の値を指定できますが、実装固有の制限がある場合があります。
| 名前: | margin-top, margin-bottom |
|---|---|
| 値: | <margin-width> | inherit |
| 初期値: | 0 |
| 適用対象: | table-caption、table、inline-table以外のtable表示型を持つ要素を除くすべての要素 |
| 継承: | no |
| パーセンテージ: | 包含ブロックの幅に基づく |
| メディア: | visual |
| 計算値: | 指定されたパーセンテージまたは絶対長 |
これらのプロパティは非置換インライン要素には影響しません。
| 名前: | margin-right, margin-left |
|---|---|
| 値: | <margin-width> | inherit |
| 初期値: | 0 |
| 適用対象: | table-caption、table、inline-table以外のtable表示型を持つ要素を除くすべての要素 |
| 継承: | no |
| パーセンテージ: | 包含ブロックの幅に基づく |
| メディア: | visual |
| 計算値: | 指定されたパーセンテージまたは絶対長 |
これらのプロパティはボックスの上、右、下、左のマージンを設定します。
h1 { margin-top: 2em }
| 名前: | margin |
|---|---|
| 値: | <margin-width>{1,4} | inherit |
| 初期値: | 個別のプロパティを参照 |
| 適用対象: | table-caption、table、inline-table以外のtable表示型を持つ要素を除くすべての要素 |
| 継承: | no |
| パーセンテージ: | 包含ブロックの幅に基づく |
| メディア: | visual |
| 計算値: | 個別のプロパティを参照 |
'margin'プロパティは、'margin-top'、'margin-right'、'margin-bottom'、および'margin-left'を同じ場所で設定するショートハンドプロパティです。
値が1つしかない場合、それはすべての辺に適用されます。値が2つある場合、上と下のマージンは最初の値に設定され、右と左のマージンは2番目の値に設定されます。値が3つの場合、上は最初の値に、左と右は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つ以上のマージンが相殺される場合、結果のマージン幅は相殺された各マージン幅の最大値となります。負のマージンの場合、負の隣接マージンの絶対値の最大値が正の隣接マージンの最大値から差し引かれます。正のマージンがない場合、隣接マージンの絶対値の最大値がゼロから差し引かれます。
ボックスの上下のマージンが隣接している場合、このボックスを通じて相殺することが可能です。この場合、要素の位置は、そのマージンが相殺されている他の要素との関係に依存します。
通じて相殺された要素の位置は、それらのマージンが相殺されている他の要素の位置には影響しません。上部ボーダーエッジの位置は、これらの要素の子孫をレイアウトするためにのみ必要です。
パディングプロパティは、ボックスのパディング領域の幅を指定します。'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つしかない場合、それは全ての辺に適用されます。値が2つある場合、上と下のパディングは最初の値に設定され、右と左のパディングは2番目の値に設定されます。値が3つの場合、上は最初の値に、左と右は2番目の値に、下は3番目の値に設定されます。値が4つの場合、それらはそれぞれ、上、右、下、左に適用されます。
パディング領域の表面色または画像は、'background'プロパティを介して指定されます:
h1 {
background: white;
padding: 1em 2em;
}
上記の例では、'1em' の垂直方向のパディング（'padding-top' および 'padding-bottom'）と '2em' の水平方向のパディング（'padding-right' および 'padding-left'）を指定しています。'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 |
| パーセンテージ: | N/A |
| メディア: | visual |
| 計算値: | 絶対長さ; ボーダースタイルが'none'または'hidden'の場合は'0' |
これらのプロパティは、ボックスの上、右、下、左のボーダーの幅を設定します。
| 名前: | border-width |
|---|---|
| 値: | <border-width>{1,4} | inherit |
| 初期値: | 個別のプロパティを参照 |
| 適用対象: | すべての要素 |
| 継承: | no |
| パーセンテージ: | N/A |
| メディア: | visual |
| 計算値: | 個別のプロパティを参照 |
このプロパティは、'border-top-width'、 'border-right-width'、 'border-bottom-width'、 および 'border-left-width'をスタイルシート内で同じ場所に設定するためのショートハンドプロパティです。
値が1つしかない場合、それはすべての辺に適用されます。値が2つある場合、上と下のボーダーは最初の値に設定され、右と左は2番目の値に設定されます。値が3つの場合、上は最初の値に、左と右は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 |
| パーセンテージ: | N/A |
| メディア: | visual |
| 計算値: | 'color' プロパティから取得する場合は 'color' の計算値、それ以外の場合は指定通り |
| 名前: | border-color |
|---|---|
| 値: | [ <color> | transparent ]{1,4} | inherit |
| 初期値: | 個別のプロパティを参照 |
| 適用対象: | すべての要素 |
| 継承: | no |
| パーセンテージ: | N/A |
| メディア: | visual |
| 計算値: | 個別のプロパティを参照 |
'border-color' プロパティは、4辺のボーダーの色を設定します。値の意味は次の通りです:
'border-color' プロパティは1つから4つの値を持つことができ、それらの値は上記の'border-width'と同様に異なる辺に設定されます。
要素のボーダーの色がボーダープロパティで指定されていない場合、ユーザーエージェントは要素の'color'プロパティの値をボーダーの色の計算値として使用しなければなりません。
この例では、ボーダーは黒の実線になります。
p {
color: black;
background: white;
border: solid;
}
ボーダースタイルプロパティは、ボックスのボーダーの線のスタイル（solid, double, dashedなど）を指定します。このセクションで定義されるプロパティは、<border-style>値タイプを参照し、以下のいずれかの値を取ります:
すべてのボーダーはボックスの背景の上に描画されます。'groove'、'ridge'、'inset'、および'outset'の値で描画されるボーダーの色は、要素のボーダー色プロパティに依存しますが、UAは実際に使用される色を計算する独自のアルゴリズムを選択することができます。たとえば、'border-color'が'silver'の場合、UAは白から濃い灰色までの色のグラデーションを使用して傾斜したボーダーを表現することができます。
| 名前: | border-top-style, border-right-style, border-bottom-style, border-left-style |
|---|---|
| 値: | <border-style> | inherit |
| 初期値: | none |
| 適用対象: | すべての要素 |
| 継承: | no |
| パーセンテージ: | N/A |
| メディア: | visual |
| 計算値: | 指定どおり |
| 名前: | border-style |
|---|---|
| 値: | <border-style>{1,4} | inherit |
| 初期値: | 個別のプロパティを参照 |
| 適用対象: | すべての要素 |
| 継承: | no |
| パーセンテージ: | N/A |
| メディア: | visual |
| 計算値: | 個別のプロパティを参照 |
'border-style' プロパティは4辺のボーダーのスタイルを設定します。このプロパティは1つから4つの値を持つことができ、上記の'border-width'と同様に、異なる辺にその値を設定します。
#xy34 { border-style: solid dotted }
この例では、水平方向のボーダーは'solid'、垂直方向のボーダーは'dotted'になります。
ボーダースタイルの初期値は'none'であるため、ボーダースタイルが設定されていない限り、ボーダーは表示されません。
| 名前: | border-top, border-right, border-bottom, border-left |
|---|---|
| 値: | [ <border-width> || <border-style> || <'border-top-color'> ] | inherit |
| 初期値: | 個別のプロパティを参照 |
| 適用対象: | すべての要素 |
| 継承: | no |
| パーセンテージ: | N/A |
| メディア: | visual |
| 計算値: | 個別のプロパティを参照 |
このプロパティは、ボックスの上、右、下、左のボーダーの幅、スタイル、および色を設定するショートハンドプロパティです。
h1 { border-bottom: thick solid red }
上記のルールは、H1要素の下部のボーダーの幅、スタイル、および色を設定します。省略された値は初期値に設定されます。次のルールではボーダーの色が指定されていないため、ボーダーは 'color'プロパティで指定された色になります:
H1 { border-bottom: thick solid }
| 名前: | border |
|---|---|
| 値: | [ <border-width> || <border-style> || <'border-top-color'> ] | inherit |
| 初期値: | 個別のプロパティを参照 |
| 適用対象: | すべての要素 |
| 継承: | no |
| パーセンテージ: | N/A |
| メディア: | 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'プロパティの後に設定されている事実は関係ありません。
各行ボックスについて、UAは各要素に対して生成されたインラインボックスを取得し、マージン、ボーダー、およびパディングを論理順序ではなく視覚順序でレンダリングする必要があります。
要素の'direction'プロパティが'ltr'の場合、その要素が現れる最初の行ボックスの左端に生成されたボックスには左マージン、左ボーダー、および左パディングがあり、要素が現れる最後の行ボックスの右端に生成されたボックスには右パディング、右ボーダー、および右マージンがあります。
要素の'direction'プロパティが'rtl'の場合、その要素が現れる最初の行ボックスの右端に生成されたボックスには右パディング、右ボーダー、および右マージンがあり、要素が現れる最後の行ボックスの左端に生成されたボックスには左マージン、左ボーダー、および左パディングがあります。