目次
CSSボックスモデルでは、木構造内の要素によって生成され、視覚整形モデルに従って配置される矩形のボックスについて述べる。 ページボックスは特殊な種類のボックスであり、その詳細については[13 ページ媒体]で言及する。
各ボックスはテキストや画像などの内容領域（content area）を持ち、その周囲には更にパディング（padding）、ボーダー（border）、マージン（margin）といった周辺領域を持つこともある。 各領域の大きさは先の章で定めるプロパティによって指定される。 以下に、各領域の相互関係及び各用語が参照する周辺領域について図示する:
マージン、ボーダー、パディングは、それぞれ上下左右の4つに区分することができる。 たとえばこの図で、LMは左マージンを、RPは右パディングを、TBは上ボーダーを表している。
これらの領域の境界線を辺（edge）と呼ぶ。 すなわち各ボックスは4種類の辺を持つことになる:
各辺は上下左右の4部分に区分できる。
ボックスの内容領域の寸法、すなわち内容領域の幅（content width）及び高さ（content height）は、幾つかの要因によって決定される。 その要因には、要素に'width'や'height'が指定されているか、そのボックスがテキストあるいは他のボックスを含んでいるか、そのボックスが表であるか、などがある。 ボックスの幅及び高さについては[10 視覚整形モデル詳細]で述べる。
ボックスの幅（box width）は、左右のマージン、ボーダー、パディング、及び内容幅の合計として与えられる。 ボックスの高さ（box height）は、上下のマージン、ボーダー、パディング、及び内容の高さの合計として与えられる。
各領域の背景は以下の様に決まる:
この章ではマージン、パディング、及びボーダーの相互関係を例示する。 以下の様なHTML文書を考えてみよう:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Examples of margins, padding, and borders</TITLE>
<STYLE type="text/css">
UL {
background: green;
margin: 12px 12px 12px 12px;
padding: 3px 3px 3px 3px;
/* ボーダーを設定しない */
}
LI {
color: black; /* テキストの色は黒 */
background: gray; /* 内容領域とパディング領域は灰色 */
margin: 12px 12px 12px 12px;
padding: 12px 0px 12px 12px; /* 右パディングだけなし */
list-style: none /* リストには印を付けない */
/* ボーダーを設定しない */
}
LI.withborder {
border-style: dashed;
border-width: medium; /* 四辺ともボーダーを設定する */
border-color: black;
}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>First element of list
<LI class="withborder">Second element of list is longer
to illustrate wrapping.
</UL>
</BODY>
</HTML>
これから導かれる木構造は、2つのLI要素を子供とするUL要素を伴う。
下の第1図は、この例が表示された様子を示している。 第2図は、UL要素及びその子供であるLI要素の周辺領域の相互関係を示している。
注意すべき点は以下の通り:
マージンのプロパティは、ボックスのマージン領域の幅を指定するものである。 簡略化プロパティ'margin'は四辺のマージン幅をすべて指定でき、それ以外のプロパティは各々決まった辺のマージン幅のみを指定する。
この章で定めるプロパティは、値の種類<margin-width>を参照する。 <margin-width>は以下のいずれかの値を取る:
負の値は不正ではないが、実装上は値に特定の制限範囲が生じることもある。
| Value: | <margin-width> | inherit |
|---|---|
| Initial: | 0 |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | refer to width of containing block |
| Media: | visual |
これらのプロパティはボックスの上下左右のマージンを設定する。
H1 { margin-top: 2em }
| Value: | <margin-width>{1,4} | inherit |
|---|---|
| Initial: | not defined for shorthand properties |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | refer to width of containing block |
| Media: | visual |
'margin'は簡略化プロパティで、'margin-top'、'margin-right'、'margin-bottom'、'margin-left'という4つのプロパティを1箇所で設定できる。
値を1つだけ指定した場合、その値は上下左右の全マージンに適用される。 2つの値を指定した場合、1つ目の値が上下のマージン、2つ目の値が左右のマージンに適用される。 3つの値を指定した場合、1つ目の値が上のマージン、2つ目の値が左右のマージン、3つ目の値が下のマージンに適用される。 4つの値を指定した場合、1つ目の値から順に上、右、下、左のマージンに適用される。
BODY { margin: 2em } /* マージンは四辺とも 2em */
BODY { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */
BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
この最後の規則は次のものと等価になる:
BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* 左辺と右辺は同じ値 */
}
本仕様で「マージンが相殺される」（collapsing margins）という表現は、相互に隣り合っているか入れ子関係にある複数のボックス間において、間にパディングもしくはボーダー領域を挟まずに隣接するマージン同士が、結合して1つのマージンになることを意味する。
CSS2では水平方向のマージンは相殺されない。
垂直方向のマージンは常に相殺される訳ではない:
マージン相殺の図については[8.2 周辺領域の例]を参照のこと。
パディングのプロパティは、ボックスのパディング領域の幅を指定する。 簡略化プロパティ'padding'は四辺のパディング幅をすべて指定でき、それ以外のプロパティは各々決まった辺のパディング幅のみを指定する。
この章で定めるプロパティは、値の種類<padding-width>を参照する。 <padding-width>は以下のいずれかの値を取る:
マージンの場合と異なり、パディングのプロパティは負の値を取れない。 一方パーセント値は、マージンの場合と同様ボックスの包含ブロック幅を参照する。
| Value: | <padding-width> | inherit |
|---|---|
| Initial: | 0 |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | refer to width of containing block |
| Media: | visual |
これらのプロパティはボックスの上下左右にパディングを設定する。
BLOCKQUOTE { padding-top: 0.3em }
| Value: | <padding-width>{1,4} | inherit |
|---|---|
| Initial: | not defined for shorthand properties |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | refer to width of containing block |
| Media: | visual |
'padding'は簡略化プロパティで、'padding-top'、'padding-right'、'padding-bottom'、'padding-left'という4つのプロパティを1箇所で設定できる。
値を1つだけ指定した場合、その値は上下左右の全パディングに適用される。 2つの値を指定した場合、1つ目の値が上下のパディング、2つ目の値が左右のパディングに適用される。 3つの値を指定した場合、1つ目の値が上のパディング、2つ目の値が左右のパディング、3つ目の値が下のパディングに適用される。 4つの値を指定した場合、1つ目の値から順に上、右、下、左のパディングに適用される。
パディング領域表面の色と画像は、'background'で指定する:
H1 {
background: white;
padding: 1em 2em;
}
この例では垂直方向のパディング（'padding-top'、'padding-bottom'）を'1em'に、水平方向のパディング（'padding-right'、'padding-left'）を'2em'に設定している。 'em'はフォントサイズを参照する相対単位なので、'1em'という値は用いられているフォントサイズと同じ値になる。
ボーダーのプロパティは、ボックスのボーダー領域の幅、色、形式を指定するものである。 これらのプロパティはあらゆる要素に適用可能である。
注。 特にHTMLでは、UAは特定の要素（BUTTON要素やMENU要素など）のボーダーに対して通常とは異なるレンダリングを行ってよい。
以下に示すプロパティはボーダー領域の幅を指定する。 これらのプロパティは値の種類<border-width>を参照する。 <border-width>は以下のいずれかの値を取る:
前3つの値の解釈はUAに依存するが、次の関係は守る必要がある:
'thin' <= 'medium' <= 'thick'
更にこれらのキーワードの幅は文書を通じて一貫でなければならない。
| Value: | <border-width> | inherit |
|---|---|
| Initial: | medium |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
これらのプロパティはボックスの上下左右のボーダー幅を設定する。
| Value: | <border-width>{1,4} | inherit |
|---|---|
| Initial: | see individual properties |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
これは簡略化プロパティで、'border-top-width'、'border-right-width'、'border-bottom-width'、'border-left-width'という4つのプロパティを1箇所で設定できる。
値を1つだけ指定した場合、その値は上下左右の全ボーダーに適用される。 2つの値を指定した場合、1つ目の値が上下のボーダー、2つ目の値が左右のボーダーに適用される。 3つの値を指定した場合、1つ目の値が上のボーダー、2つ目の値が左右のボーダー、3つ目の値が下のボーダーに適用される。 4つの値を指定した場合、1つ目の値から順に上、右、下、左のボーダーに適用される。
以下の例では、コメント内で上、右、下、左の順に適用される値を示している:
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 */
以下に示すプロパティはボーダーの色を指定する。
| Value: | <color> | transparent | inherit |
|---|---|
| Initial: | the value of the 'color' property |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Value: | <color>{1,4} | transparent | inherit |
|---|---|
| Initial: | see individual properties |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
'border-color'プロパティは四辺のボーダー色を設定する。 各値は以下の様な意味を持つ:
'border-color'プロパティは1つ以上4つ以下の値を取り、それらの値は'border-width'の設定箇所とは無関係に指定できる。
これらのプロパティで色が指定されない場合、UAはボーダー色の算出値としてその要素の'color'の値を用いなければならない。
この例ではボーダーは黒の実線になる。
P {
color: black;
background: white;
border: solid;
}
以下に示すプロパティはボーダーの種類（実線、二重線、破線など）を指定する。 これらのプロパティは値の種類<border-style>を参照する。 <border-style>は以下のいずれかの値を取る:
ボーダーはすべてボックスの背景の上に描かれる。 値として'groove'、'ridge'、'inset'、'outset'を取る場合、ボーダーの色はその要素の'color'の値に依存する。
HTMLの適合UAは'dotted'、'dashed'、'double'、'groove'、'ridge'、'inset'、'outset'という六つの値を'solid'として解釈してもよい。 そのことは不適合を意味しない。
| Value: | <border-style> | inherit |
|---|---|
| Initial: | none |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Value: | <border-style>{1,4} | inherit |
|---|---|
| Initial: | see individual properties |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
'border-style'プロパティは四辺のボーダーの種類を設定する。 1つ以上4つ以下の値を取り、それらの値は'border-width'の設定箇所とは無関係に指定できる。
#xy34 { border-style: solid dotted }
上の例では上下のボーダーが実線に、左右のボーダーが点線ということになる。
ボーダーの種類は初期値が'none'なので、種類を設定しないとボーダーは見えないままになる。
| Value: | [ <'border-top-width'> || <'border-style'> || <color> ] | inherit |
|---|---|
| Initial: | see individual properties |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
これらは簡略化プロパティで、各々上下左右のボーダーの幅、種類、色を1箇所で指定できる。
H1 { border-bottom: thick solid red }
上に示した規則では、H1要素下部のボーダーの幅、種類、色を設定している。 省略された項目には初期値が設定される。 次の規則では色を指定していないので、ボーダーは'color'プロパティで指定された色になるだろう:
H1 { border-bottom: thick solid }
| Value: | [ <'border-width'> || <'border-style'> || <color> ] | inherit |
|---|---|
| Initial: | see individual properties |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
'border'は簡略化プロパティで、ボックス四辺のボーダーを同じ幅、色、種類に設定する。 'margin'や'padding'とは異なり、'border'プロパティは四辺のボーダーに別々の値を設定できない。 そうしたい場合は、ボーダーに関する他のプロパティを用いる必要が。
たとえば、下に示した冒頭の規則とその後に続く4つの規則とは等価になる:
P { border: solid red }
P {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
ボーダーのプロパティは機能が重複しているので、規則を指定する順序が重要になる。
こんな例を考えてみよう:
BLOCKQUOTE {
border-color: red;
border-left: double;
color: black
}
この場合、左ボーダーの色が黒、それ以外のボーダーは赤になる。 この結果は'border-left'というプロパティが幅、種類、色をすべて設定してしまうことに起因する。 すなわち、'border-left'に色の値が明示されていないので、'color'の値を用いることになるのである。 ただこの時、'color'が'border-left'より後ろに設定されていることは何も関係ない。