8 ボックスモデル

CSSボックスモデルは,文書ツリーの要素に対して生成される長方形のボックスを記述し,視覚フォーマットモデルに従って拡張する。ページボックスは,特殊なボックスであって,ページ付けしたメディアの箇所で詳細を記述する。

8.1 ボックスの寸法

各ボックスは,テキスト,画像などの内容領域をもち,オプションで,その周囲にパディング境界及びマージンの領域をもつ。各領域のサイズは,以降で定義される特性によって指定される。次の図は,これらの領域がどのように関係しているか,並びにマージン,境界及びパディングの断片を参照するために使用する用語を示す。

Image illustrating the relationship between content, padding, borders, and margins.   [D]

マージン,境界及びパディングは,左部,右部,上部及び下部に分けることができる。例えば,図では,左マージンは"LM",右パディングは"RP",上境界は"TB"などとなっている。

四つの領域(内容,パディング,境界及びマージン)の各周辺を"辺"と呼ぶ。そこで,各ボックスには四つの辺をもつ。

内容辺又は内辺
内容辺は,要素のレンダリングされる内容を囲む。
パディング辺
パディング辺は,ボックスのパディングを囲む。パディングがゼロの幅をもつ場合,パディング辺は内容辺と同じとする。ボックスのパディング辺は,ボックスが設定した包含ブロックの辺を定義する。
境界辺
境界辺は,ボックスの境界を囲む。境界がゼロの幅をもつ場合,境界辺はパディング辺と同じとする。
マージン辺又は外辺
マージン辺は,ボックスのマージンを囲む。ボックスのマージンがゼロの幅をもつ場合,マージン辺は境界辺と同じとする。

各辺は,左辺,右辺,上辺及び下辺に分かれる。

ボックスの内容領域の寸法,すなわち内容の幅及び内容の高さは,複数の要因に依存する。ここで複数の要因とは,ボックスを生成する要素が'width'特性集合又は'height'特性集合をもつかどうか,ボックスがテキスト又はその他のボックスを含んでいるかどうか,ボックスが表であるかどうかなどとする。ボックスの幅及び高さは,視覚フォーマットモデルの詳細で示す。

ボックス幅は,左マージン及び右マージン,境界,パディング並びに内容幅の合計によって与えられる。高さは,上マージン及び下マージン,境界,パディング並びに内容の高さの合計によって与えられる。

ボックスの様々な領域の背景スタイルは,次のとおりに決定される。

8.2 マージン,パディング及び境界の例

次の例は,マージン,パディング及び境界がどのように相互作用するかを示す。
<!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;
                                     /* No borders set */
      }
      LI { 
        color: black;                /* text color is black */ 
        background: gray;            /* Content, padding will be gray */
        margin: 12px 12px 12px 12px;
        padding: 12px 0px 12px 12px; /* Note 0px padding right */
        list-style: none             /* no glyphs before a list item */
                                     /* No borders set */
      }
      LI.withborder {
        border-style: dashed;
        border-width: medium;        /* sets border width on all sides */
        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>

このHTML文書例は,(他の関係の間で,)二つのLIを子供とするUL要素をもった文書ツリーを生じる。

次の最初の図は,この例が何を生成するかを示している。2番目の図は,UL要素のマージン,パディング及び境界と,その子供であるLI要素のマージン,パディング及び境界との関係を示している。

Image illustrating how parent and child margins, borders,
and padding relate.   [D]

次に注意することを示す。

8.3 マージン特性 ('margin-top''margin-right''margin-bottom''margin-left'及び 'margin')

マージン特性は,ボックスのマージン領域の幅を指定する。'margin'簡略記述特性は,上下左右のマージンをすべて設定するが,その他のマージン特性は,上下左右のマージンを個々に設定する。

ここで定義される特性は,<margin-width>値型を参照し, 次の値のうちいずれか一つをとってもよい。

<length>
固定幅を指定する。
<percentage>
パーセントは,生成されるボックスの包含ブロックに関して算出される。これは,'margin-top'及び'margin-bottom'に対して真とする,ページ文脈にある場合は例外とする。ページ文脈では, パーセントはページボックスの高さを参照する。
auto
振る舞いに関する幅及びマージンの計算を参照すること。

マージン特性に対して,負の値は許されるが,実装固有の制限が存在してもよい。

'margin-top', 'margin-right', 'margin-bottom', 'margin-left'
値:  <margin-width> | inherit
初期値:  0
適用対象:  すべての要素
継承:  しない
パーセント値:  包含ブロックの幅を参照する
メディア:  視覚メディア

これらの特性は,ボックスの上マージン,右マージン,下マージン及び左マージンを設定する。

H1 { margin-top: 2em }
'margin'
値:  <margin-width>{1,4} | inherit
初期値:  簡略記述特性には定義されない
適用対象:  すべての要素
継承:  しない
パーセント値:   包含ブロックの幅を参照する
メディア:  視覚メディア

'margin'特性は,'margin-top''margin-right''margin-bottom'及び 'margin-left'をスタイルシートの同じ位置で設定するための簡略記述特性とする。

値がただ一つだけ存在する場合は,上下左右のすべてのマージンにそれを適用する。値が二つ存在する場合は,上下マージンに最初の値を設定し,左右マージンに2番目の値を設定する。値が三つ存在する場合は,上マージンに最初の値を設定し,左右マージンに2番目の値を設定し,下マージンに3番目の値を設定する。値が四つ存在する場合は,上マージン,右マージン,下マージン及び左マージンにそれぞれを適用する。

例:

BODY { margin: 2em }         /* all margins set to 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;        /* copied from opposite side (right) */
}

8.3.1 マージンのつぶし

この標準情報(TR)では, マージンのつぶしという表現は,二つ以上のボックスの(パディング領域又は境界領域によって分離されていない)隣接マージンが,結合して単一のマージンを形成するという意味とする。ただし,この場合の二つ以上のボックスは,互いに隣接するか,又は入れ子になっていてもよい。

CSS2では, 左右マージンはつぶされない。

上下マージンは,次の一定のボックス間でつぶされてもよい。

つぶされたマージンの図については,マージン,パディング及び境界の例を参照すること。

8.4 パディング特性 ('padding-top''padding-right''padding-bottom''padding-left'及び 'padding')

パディング特性は,ボックスのパディング領域の幅を指定する。'padding'簡略記述特性は,上下左右のパディングをすべて設定するが,その他のパディング特性は,パディングを各サイドだけに設定する。

ここで定義される特性は,<padding-width>値型を参照し, 次の値の一つをとってよい。

<length>
固定幅を指定する。
<percentage>
パーセントは,生成されるボックスの包含ブロックに関して算出される。'padding-top'及び'padding-bottom'についてさえも同様とする。

マージン特性とは異なり, パディング値は,負とすることはできない。マージン特性と同様に,パディング特性のパーセント値は,生成されるボックスの包含ブロックの幅を参照する。

'padding-top', 'padding-right', 'padding-bottom', 'padding-left'
値:  <padding-width> | inherit
初期値:  0
適用対象:  すべての要素
継承:  しない
パーセント値:  包含ブロックの幅を参照する
メディア:  視覚メディア

これらの特性は,ボックスの上パディング,右パディング,下パディング及び左パディングを設定する。

例:

BLOCKQUOTE { padding-top: 0.3em }
'padding'
値:  <padding-width>{1,4} | inherit
初期値:  簡略記述特性には定義されない
適用対象:  すべての要素
継承:  しない
パーセント値:  包含ブロックの幅を参照する
メディア:  視覚メディア

'padding'特性は,'padding-top''padding-right''padding-bottom'及び'padding-left'をスタイルシートの同じ位置で設定するための簡略記述特性とする。

値が一つだけ存在する場合は, 上下左右パディングのすべてにそれを適用する。値が二つ存在する場合は,上下パディングに最初の値を設定し,左右パディングに2番目の値を設定する。値が三つ存在する場合は,上パディングに最初の値を,左右パディングに2番目の値を,下パディングに3番目の値をそれぞれ設定する。値が四つ存在する場合は,右パディング,右パディング,下パディング及び左パディングにそれぞれを適用する。

パディング領域における面の色又は画像は,'background'特性を介して指定される。

H1 { 
  background: white; 
  padding: 1em 2em;
} 

この例では,上下パディング('padding-top'及び'padding-bottom')は'1em'に指定され,左右パディング('padding-right'及び'padding-left')は'2em'に指定されている。'em'単位は,要素のフォントサイズに相対的とする。'1em'は使用されるフォントのサイズに等しい。

8.5 境界特性

境界特性は,ボックスの境界領域の幅,色及びスタイルを指定する。これらの特性は,すべての要素に適用される。

備考  特にHTMLの場合は,利用者エージェントは,"通常の"要素とは異なるボタン,メニューなどの一定の要素に対して境界をレンダリングしてもよい。

8.5.1 境界幅 ('border-top-width''border-right-width''border-bottom-width''border-left-width'及び 'border-width')

境界幅特性は境界領域の幅を指定する。ここで定義される特性は,<border-width>値型を参照し, 次の値の一つをとってよい。

thin
細い境界
medium
中間の太さの境界
thick
太い境界
<length>
境界の太さは明示的な値をもつ。明示的な境界は,負の値をとることができない。

最初の三つの値の解釈は,利用者エージェントに依存する。しかし,次の関係は維持されなければならない。

'thin' <='medium' <= 'thick'.

さらに, これらの幅は文書を通して一定でなければならない。

'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'
値:  <border-width> | inherit
初期値:  中間の太さ
適用対象:  すべての要素
継承:  しない
パーセント値:  N/A
メディア:  視覚メディア

これらの特性は,ボックスの上境界,右境界,下境界及び左境界を設定する。

'border-width'
値:  <border-width>{1,4} | inherit
初期値:  個々の特性を参照
適用対象:  すべての要素
継承:  しない
パーセント値:  N/A
メディア:  視覚メディア

この特性は,'border-top-width''border-right-width''border-bottom-width'及び'border-left-width'をスタイルシートの同じ位置に設定するための簡略記述特性とする。

値が一つだけ存在する場合は,上下左右の境界すべてにそれを適用する。値が二つ存在する場合は,上下境界に最初の値を設定し,左右境界に2番目の値を設定する。値が三つ存在する場合は,上境界に最初の値を,左右境界に2番目の値を,下境界に3番目の値をそれぞれ設定する。値が四つ存在する場合は,上境界,右境界,下境界及び左境界にそれぞれを適用する。

次の例では,コメントが,上境界,右境界,下境界及び左境界の結果として生じる幅を示す。

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 */

8.5.2 境界色 ('border-top-color''border-right-color''border-bottom-color''border-left-color'及び'border-color')

境界色特性は,ボックスの境界の色を指定する。

'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'
値:  <color> | inherit
初期値:  'color' 特性の値
適用対象:  すべての要素
継承:  しない
パーセント値:  N/A
メディア:  視覚メディア
'border-color'
値:  <color>{1,4} | transparent | inherit
初期値:  個々の特性を参照
適用対象:  すべての要素
継承:  しない
パーセント値:  N/A
メディア:  視覚メディア

'border-color'特性は,上下左右の境界の色を設定する。値は次の意味をもつ。

<color>
色値を指定する。
transparent
幅はもってもよいが,境界の色は透明とする。

'border-color'特性は一つから四つまでの値をもつことができ,値は'border-width'の場合と同様に上下左右に設定される。

要素の境界色が境界特性を用いて指定されない場合は,利用者エージェントは,要素の'color'特性の値を境界色の計算値として使用しなければならない。

次の例では, 境界は黒い実線となる。

P { 
  color: black; 
  background: white; 
  border: solid;
}

8.5.3 境界スタイル ('border-top-style''border-right-style''border-bottom-style''border-left-style'及び 'border-style')

境界スタイル特性は,実線,二重線,破線などのボックスの境界の線種を指定する。ここで定義される特性は,<border-style>値型を参照し,次の一つをとってよい。

none
境界なし。この値によって,'border-width'の計算値は必ず'0'となる。
hidden
'none'と同様だが,表要素境界の競合解決する点が異なる。
dotted
境界は,点線とする。
dashed
境界は,破線とする。
solid
境界は,一重の実線とする。
double
境界は,二重の実線とする。二つの線とそれらの間のスペースとの合計は,'border-width'の値に等しい。
groove
境界は,描画面に刻まれているように見える。
ridge
'grove'の反対とする。境界は,描画面から浮出しているように見える。
inset
境界は,ボックス全体を描画面に埋め込んでいるように見せる。
outset
'inset'の反対とする。境界は,ボックス全体を描画面から浮き上がらせているように見せる。

すべての境界は,ボックスの背景の上に描写される。'groove','ridge','inset'及び'outset'という値に対して描かれる境界の色は,要素の'color'特性に依存する。

適合するHTML利用者エージェントは,'dotted','dashed','double','groove','ridge','inset'及び'outset'を'solid'と解釈してもよい。

'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'
値:  <border-style> | inherit
初期値:  none
適用対象:  すべての要素
継承:  しない
パーセント値:  N/A
メディア:  視覚メディア
'border-style'
値:  <border-style>{1,4} | inherit
初期値:  個々の特性を参照
適用対象:  すべての要素
継承:  しない
パーセント値:  N/A
メディア:  視覚メディア

'border-style'特性は,上下左右の境界のスタイルを設定する。この特性は一つから四つの値をもつことができ,8.5.1の'border-width'と同様に,値は上下左右に設定される。

例:

#xy34 { border-style: solid dotted }

この例では, 左右境界は'solid'となっており,上下境界は'dotted'となる。

境界スタイルの初期値は'none'なので,境界スタイルが設定されていない場合は,境界は見えない。

8.5.4 境界簡略記述特性 ('border-top''border-bottom''border-right''border-left'及び'border')

'border-top', 'border-right', 'border-bottom', 'border-left'
値:  [ <'border-top-width'> || <'border-style'> || <color> ] | inherit
初期値:  個々の特性を参照
適用対象:  すべての要素
継承:  しない
パーセント値:  N/A
メディア:  視覚メディア

これは,ボックスの上境界,右境界,下境界及び左境界の,幅,スタイル及び色の設定を目的とする簡略記述特性とする。

H1 { border-bottom: thick solid red }

この規則は,H1要素以下の境界の幅,スタイル及び色を設定する。省略した値はその初期値に設定される。次の規則は境界の色を指定しないので,境界は,'color'特性が指定する色をもつ。

H1 { border-bottom: thick solid }
'border'
値:  [ <'border-width'> || <'border-style'> || <color> ] | inherit
初期値:  個々の特性を参照
適用対象:  すべての要素
継承:  しない
パーセント値:  N/A
メディア:  視覚メディア

'border'特性は,ボックスの上下左右すべての境界に,同じ幅,色及びスタイルを設定するための簡略記述特性とする。簡略記述'margin'特性及び簡略記述'padding'特性とは異なり,'border'特性は,上下左右の境界に異なる値を設定することができない。上下左右の境界に異なる値を設定するには,他の境界特性を一つ以上使用しなければならない。

例えば, 次の最初の規則はその後の四つの規則の集合と等しい。

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'特性の後に設定されていることは,重要ではない。