概要
CSS のボックスには、次の図のように、マージン境界、ボーダー境界、パディング境界、コンテンツエリア境界の 4 つの辺があります:
マージンエリアは、マージン境界内の領域です。この領域の大きさは、マージンボックスの幅 (width
) とマージンボックスの高さ (height
) になります。
ボーダーエリアは、ボーダー境界内の領域です。この領域の大きさは、ボーダーボックスの幅 (width
) とボーダーボックスの高さ (height
) になります。
パディングエリアは、パディング境界内の領域です。この領域の大きさは、パディングボックスの幅 (width
) とパディングボックスの高さ (height
) になります。
コンテンツエリアは、コンテンツエリア境界内の領域です。この領域の大きさは、コンテンツの幅 (width
) (またはコンテンツボックスの幅) とコンテンツの高さ (height
) (またはコンテンツボックスの高さ) になります。
補足
マージンの相殺 (margin collapsing) がなされている場合のマージンエリアについては、ボックス同士が隣接する為、明確に定義されていません。
マージンを置き換えられないインライン要素については、空間の大きさは line-height プロパティによって決定され、行の高さに含まれます。この場合も境界とパディングは内容の周囲に視覚的に現れます。
仕様
仕様書 | 策定状況 | コメント |
---|---|---|
CSS Level 2 (revision 1) | 勧告 | 表現をより正確に。有意な変更点は無し |
CSS Level 1 | 勧告 |
参照
- CSS リファレンス
- CSS の主要概念: CSS 構文、 詳細度、 継承、 ボックスモデル、 レイアウトモード、 視覚フォーマットモデル、 マージンの相殺、 値 (initial / computed / used / actual)、 値の定義構文、 ショートハンドプロパティ、 置換要素
- 関連 CSS プロパティ:
box-sizing
,height
,max-height
,min-height
,width
,max-height
,min-height
,padding
,padding-top
,padding-right
,padding-bottom
,padding-left
,border
,border-top
,border-right
,border-bottom
,border-left
,border-width
,border-top-width
,border-right-width
,border-bottom-width
,border-left-width
,margin
,margin-top
,margin-right
,margin-bottom
,margin-left