概要
CSS のボックスには、次の図のように、マージン境界、ボーダー境界、パディング境界、コンテンツエリア境界の 4 つの辺があります:
.png)
マージンエリアは、マージン境界内の領域です。この領域の大きさは、マージンボックスの幅 (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