CSS ボックスモデル

CSS のボックスは、テキスト、画像、その他の HTML 要素が表示されるコンテンツ領域で構成されています。この領域は、パディング、境界、マージンによって、1 つ以上の辺で囲まれることがあります。ボックスモデルは、これらの要素がどのように連携して CSS で表示されるボックスを作成するかを説明します。詳しくは、CSS ボックスモデル入門をご覧ください。

ボックスモデルの仕様書では、ボックスの各部分の辺を参照する一連のキーワードが定義されています。これらは、box-sizing プロパティの値など、CSS のキーワード値としても使用され、ボックスモデルがどのように寸法を計算するかを制御します。

content-box

そのボックスのコンテンツ領域の辺です。

padding-box

そのボックスのパディングの辺です。その方向にパディングがなかった場合は、 content-box と同じになります。

border-box

そのボックスの境界の辺です。その方向に境界がなかった場合は、 padding-box と同じになります。

margin-box

そのボックスのマージンの辺です。その方向にマージンがなかった場合は、 border-box と同じになります。

stroke-box

SVG では、ストロークの囲みボックスを指します。 CSS では content-box として扱われます。

view-box

SVG では、最も近い SVG ビューポート要素の原点ボックスを指します。これはその要素の viewBox 属性によって確立された初期の SVG ユーザー座標系の幅と高さを持つ長方形です。CSS では border-box として扱われます。

ボックスのマージンを制御するプロパティ

マージンは、ボックスの境界を囲み、ボックス同士の間隔を確保するものです。

• margin
• margin-bottom
• margin-left
• margin-right
• margin-top
• margin-trim Experimental

ボックスのパディングを制御するプロパティ

パディングは、ボックスの境界の縁と内容物の縁の間に挿入されます。

• padding
• padding-bottom
• padding-left
• padding-right
• padding-top

その他のプロパティ

ボックスモデルに関連するプロパティは他にもあり、それらは別の場所で定義されています。

境界

境界のプロパティは、境界の太さ、描画スタイル、色を指定します。

オーバーフロー

内容物が多すぎてボックスに入りきらない場合に起こることを制御します。

CSS ボックスモデルの紹介

CSS の基礎的概念の 1 つである、ボックスモデルを解説します。このモデルは CSS が要素とそのコンテンツ領域、パディング領域、境界領域、マージン領域をどのように配置するかを定義しています。

マージンの相殺の理解

2 つの隣接するマージンが 1 つに相殺されることがあります。この記事ではいつなぜそれが発生し、どのように制御するかを説明します。

視覚整形モデル

視覚整形モデルを説明します。