CSS 基本ボックスモデル入門

ブラウザーのレンダリングエンジンは文書をレイアウトする際に、それぞれの要素を標準的な 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 カスケードの紹介
• カスケードと継承

仕様書

関連情報

• CSS の主要概念: CSS 構文、 詳細度、 継承、 ボックスモデル、 レイアウトモード、 視覚フォーマットモデル、 マージンの相殺、 値 (initial / computed / used / actual)、 値の定義構文、 ショートハンドプロパティ、 置換要素