CSS ボックスモデル

CSS ボックスモデル (CSS box model) モジュールはマージン (margin) とパディング (padding) のプロパティを定義し、それが高さ、幅、境界のプロパティとともに、 CSS のボックスモデルを構成します。

ウェブページ上のすべての可視要素は、視覚整形モデルに従ってレイアウトされたボックスです。CSSプロパティはそれらのサイズ、位置、重ね合わせレベルを定義し、ボックスモデルプロパティ（およびその他のプロパティ）はそれぞれのボックスの外部サイズと周囲の空間を定義します。

それぞれのボックスには矩形のコンテンツ領域があり、その内部にテキスト、画像、その他のコンテンツが表示されます。コンテンツは、1 つ以上の辺でパディング、境界、マージンに囲まれることがあります。パディングはコンテンツの周囲に、境界線はパディングの周囲に、マージンは境界線の外側に配置されます。ボックスモデルは、これらの機能（コンテンツ、パディング、境界線、マージン）がどのように連携して CSS によって表示されるボックスを生成するのかを記述するものです。

CSS ボックスモデルモジュールは、margin-top や padding-top などの物理的（または「ページ相対」）プロパティを定義します。margin-block-start や margin-inline-startなどの（テキストの方向に関連した）フロー相対プロパティは、論理的プロパティと値で定義されています。ボックスモデルモジュールは、CSS サイズ指定モジュールによって拡張されています。このモジュールは内在サイズ値を導入し、少なくとも一辺が自動サイズ指定される要素に対してアスペクト比を定義することができるようになります。