Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Box model

概要

CSS のボックスには、次の図のように、マージン境界ボーダー境界パディング境界コンテンツエリア境界の 4 つの辺があります:

boxmodel.png

マージンエリアは、マージン境界内の領域です。この領域の大きさは、マージンボックスの幅 (width)マージンボックスの高さ (height) になります。

ボーダーエリアは、ボーダー境界内の領域です。この領域の大きさは、ボーダーボックスの幅 (width)ボーダーボックスの高さ (height) になります。

パディングエリアは、パディング境界内の領域です。この領域の大きさは、パディングボックスの幅 (width)パディングボックスの高さ (height) になります。

コンテンツエリアは、コンテンツエリア境界内の領域です。この領域の大きさは、コンテンツの幅 (width) (またはコンテンツボックスの幅) とコンテンツの高さ (height) (またはコンテンツボックスの高さ) になります。

補足

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

マージンを置き換えられないインライン要素については、空間の大きさは line-height プロパティによって決定され、行の高さに含まれます。この場合も境界とパディングは内容の周囲に視覚的に現れます。

仕様

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

参照

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

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