概要

ドキュメント内で、それぞれの要素は長方形のボックスとして表されます。これらのボックスのサイズや属性 (色、背景、ボーダーの外観など) を決めることが、レンダリングの目的です。

CSS ではそれぞれの長方形のボックスを、標準的なボックスモデルを使用して表現します。このモデルは、要素が占めるコンテンツの領域を表します。それぞれのボックスには、マージン境界ボーダー境界パディング境界コンテンツエリア境界の 4 つの辺があります。

CSS Box model

コンテンツエリアは、要素の実際のコンテンツを含む領域です。この領域は背景色または背景画像 (この順番では、不透明の画像が背景色を隠します) を持つことがあり、それらの背景はコンテンツエリア境界内に配置されます。この領域の大きさは、コンテンツの幅 (width) またはコンテンツボックスの幅コンテンツの高さ (height) またはコンテンツボックスの高さになります。

CSS の box-sizing プロパティが既定値であれば、CSS の widthmin-widthmax-widthheightmin-heightmax-height プロパティはコンテンツエリアのサイズを制御します。

パディングエリアは、パディングを囲んでいるボーダーを拡張します。コンテンツエリアに背景色や背景画像がある場合は、背景がパディングエリアにも広がります。これは、パディングがコンテンツエリアを広げるものと考えることができる理由です。パディングはパディング境界の内部に置かれます。この領域の大きさは、パディングボックスの幅 (width)パディングボックスの高さ (height) になります。

パディング境界とコンテンツエリア境界の間隔は、CSS の padding-toppadding-rightpadding-bottompadding-left プロパティおよびショートハンドプロパティの padding で制御できます。

ボーダーエリアはパディングエリアを、ボーダーを含む領域で広げます。この領域はボーダー境界の内部に置かれます。この領域の大きさは、ボーダーボックスの幅 (width)ボーダーボックスの高さ (height) になります。また、border-width プロパティやショートハンドプロパティである border で定義されるボーダーのサイズに依存します。

マージンエリアはボーダー領域を、隣の要素と引き離すために使用する空の領域で広げます。この領域はマージン境界の内部に置かれます。この領域の大きさは、マージンボックスの幅 (width)マージンボックスの高さ (height) になります。

マージンエリアのサイズは、CSS の margin-topmargin-rightmargin-bottommargin-left プロパティおよびショートハンドプロパティの margin で制御できます。

マージンの相殺 (margin collapsing) がなされている場合のマージンエリアについては、ボックス同士が隣接する為、明確に定義されていません。

置換要素ではないインライン要素については、空間の大きさは line-height プロパティによって決定され、行の高さに寄与します。この場合もボーダーとパディングはコンテンツの周囲に視覚的に現れます。

仕様

仕様書 策定状況 コメント
CSS Level 2 (Revision 1) 勧告 表現をより正確に。有意な変更点はなし
CSS Level 1 勧告 初期定義

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss, ethertank, Marsf
 最終更新者: yyss,