ブラウザーのレンダリングエンジンは文書をレイアウトする際に、それぞれの要素を標準的な CSS ボックスモデルに基づいた長方形のボックスとして表現します。 CSS はこれらのボックスの寸法、位置、プロパティ(色、背景、境界線の太さなど)を決定します。
それぞれのボックスは4つの部品 (または領域) から構成され、それぞれの辺についてコンテンツ境界 (content edge)、パディング境界 (padding edge)、ボーダー境界 (border edge)、マージン境界 (margin edge) が定義されています。
コンテンツ領域は、コンテンツ境界に囲まれた領域で、文字列、画像、動画プレイヤー等の「実際の」コンテンツを含みます。領域の寸法はコンテンツ幅(またはコンテンツボックスの幅)とコンテンツの高さ(またはコンテンツボックスの高さ)です。背景色や背景画像を持っていることがあります。
box-sizing
プロパティが content-box
(既定値)に設定されている場合は、コンテンツ領域の寸法は width
、 min-width
、 max-width
、 height
、 min-height
、 max-height
の各プロパティによって正確に定義することができます。
パディング領域は、パディング境界に囲まれた領域で、コンテンツ領域に要素のパディングを含めて拡張したものです。寸法はパディングボックスの幅とパディングボックスの高さです。
パディングの幅は、 padding-top
、 padding-right
、 padding-bottom
、 padding-left
の各プロパティおよび一括指定プロパティの padding
で決定されます。
ボーダー領域は、ボーダー境界に囲まれた領域で、パディング領域に要素の境界線を含めて拡張したものです。寸法はボーダーボックスの幅とボーダーボックスの高さ になります。
境界線の幅は、 border-width
および一括指定プロパティの border
で決定されます。 box-sizing
プロパティが border-box
に設定されていた場合、ボーダー領域の寸法は width
、 min-width
、 max-width
、 height
, min-height
、 max-height
の各プロパティで正確に定義することができます。ボックスに背景(background-color
又は background-image
)が設定されている場合、背景はボーダー境界の外枠まで拡張されます(つまり、 Z 順で境界線の下にまで拡張されます)。これは既定の振る舞いで、 CSS の background-clip
プロパティで変更することができます。
マージン領域は、マージン境界に囲まれた領域で、ボーダー領域に、隣の要素と分離するために使用する空の領域を含めて拡張したものです。この領域の大きさは、マージンボックスの幅とマージンボックスの高さになります。
マージン領域の寸法は、 margin-top
、 margin-right
、 margin-bottom
、 margin-left
の各プロパティおよび一括指定プロパティである margin
で決定されます。マージンの相殺 (margin collapsing)が発生したときは、マージンがボックス間で共有されるため、マージン領域が明確に定義されません。
置換要素ではないインライン要素については、空間の大きさは line-height
プロパティによって決定され、行の高さに寄与します。この場合も境界線とパディングは、コンテンツの周囲に視覚的に現れます。
関連情報
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Basic Box Model | 草案 | |
CSS Level 2 (Revision 1) | 勧告 | 言葉遣いをより正確にしたが、有意な変更点はなし |
CSS Level 1 | 勧告 | 初回定義 |