メインコンテンツへスキップ

ボックスモデル

1.概要

文書をレイアウトする際に、
それぞれの要素を標準的な
CSSボックスモデルに基づいた
長方形のボックスとして
表現します。

ボックスモデル (box model.)とは、ドキュメントツリー(document tree.)内の要素に対して生成され、視覚的な書式設定モデル(visual formatting model.)に従ってレイアウトされる長方形のボックスのモデルです。ボックスについての基本的な概念だと思います。

それぞれのボックスは コンテンツ領域(テキスト、画像など)と、オプションで周囲のパディング領域, ボーダー領域, マージン領域 と定義されています。 各領域のサイズは、marginプロパティ, borderプロパティ, paddingプロパティなどによって指定できます。

マージン, ボーダー, パディングは、上、右、下、左のセグメントに分けられます。 4 つの領域(コンテンツ, パディング, ボーダー, マージン) のそれぞれの周囲は「edge : エッジ」と呼ばれ、各ボックスには上, 右, 下, 左の 4つのエッジがあります。

エッジは、ここでは 端, 縁という、物の境界や端の部分を指していると思います。

マージン領域
ボーダー領域
パディング領域
コンテンツ
領域

2.コンテンツ領域

マージン領域
ボーダー領域
パディング領域
コンテンツ
領域

コンテンツ領域 (content area.)とは、コンテンツエッジ(content edge.) に囲まれた領域(area.)で、文字列や画像，動画プレイヤー等の実際のコンテンツを含みます。

コンテンツエッジは、ボックスの幅と高さによって指定される四角形を囲みます。 多くの場合、要素のレンダリングされたコンテンツに依存します。 4つのコンテンツエッジによって、ボックスのコンテンツボックスが定義されます。 各エッジは、上, 右, 下, 左のエッジに分けられます。

コンテンツ領域のサイズ(コンテンツの幅と高さ) は、ボックスを生成する要素にwidthプロパティ, heightプロパティが設定されているかどうか, ボックスにテキストまたは他のボックスが含まれているかどうか, ボックスがテーブルであるかどうかなど、いくつかの要因によって決まります。

box-sizing: content-box; (既定値) の場合、要素に指定した幅，高さはこのコンテンツ領域の幅，高さです。

ボックスのコンテンツ, パディング, および境界領域の背景スタイルは、生成要素の「背景」プロパティによって指定されます。余白の背景は常に透明です。

コンテンツ : 内容, 中身

  1. <div style="width: 3em; height: 2em; box-sizing: content-box; outline: 1px solid; padding: 0.5em; border: 0.5em solid transparent; background-clip: content-box; background-color: #ccffff;"></div>

width: 3em; で幅を３文字分としていますが余白と境界も上下左右に各0.5文字分を指定しているので、左の輪郭線と右の輪郭線の幅は5文字分となりました。
高さも同様の計算となります。

一二三四五

box-sizing: content-box; を指定した場合(既定値なので省略時を含む)の、幅，高さの指定がどこを示すかの例示です。
outline を指定して、要素の輪郭線を視覚化しています。
padding: 0.5em; border: 0.5em solid transparen; と指定して他の指定値を意図的に存在させる事により、幅，高さが何を表しているかを実感したいと例示しました。
background-clip: content-box; で背景をコンテンツボックス領域中に表示する指定をして、background-color で背景を指定しています。

  1. <div class="XHSample46202"><div></div><div></div><div></div></div>
  1. .XHSample46202 > div {
  2. width: 4em;
  3. height: 4em;
  4. box-sizing: border-box;
  5. outline: 1px solid;
  6. padding: 1em;
  7. background-image: url('./risyu.svg');
  8. background-size: 100%;
  9. }
  10. .XHSample46202 > div:first-child {
  11. background-clip: padding-box;
  12. }
  13. .XHSample46202 > div:nth-child(2) {
  14. background-clip: content-box;
  15. }
  16. .XHSample46202 > div:nth-child(3) {
  17. background-clip: content-box;
  18. background-origin: content-box;
  19. }

background-clip: content-box; を指定した場合の、背景の見え方の例示です。

コンテンツと余白の切り分けに注意が必要かと思います
overflow では余白を含めて要素の溢れを処理し
box-sizing で幅，高さの指定がどこを示すかが指定できるし
background-clip で背景をどこまで含むか指定できるし
background-origin で背景画像の原点が指定できます。

3.パディング領域

マージン領域
ボーダー領域
パディング領域
コンテンツ
領域

パディング領域 (padding area.)とは、パディングエッジ(padding edge.) に囲まれた領域(area.)で、コンテンツ領域(content area.)に要素の余白を含めて拡張したものです。

パディングエッジはボックスのパディングを囲みます。パディングの幅が 0 の場合、パディングエッジはコンテンツエッジと同じになります。4つのパディングエッジによって、ボックスのパディングボックスが定義されます。 各エッジは、上, 右, 下, 左のエッジに分けられます。

box-sizing: content-box; (既定値) の場合、要素に指定した幅，高さは、コンテンツ領域の幅，高さです。box-sizing: border-box; の場合、要素に指定した幅，高さは、ボーダー領域の幅，高さです。パディング領域の幅，高さを直接指定するbox-sizingプロパティの値はありません。 パディング領域の幅は、コンテンツ領域の幅に右パディングと左パディングの幅を足したものです。 パディング領域の高さは、コンテンツ領域の高さに上パディングと下パディングの幅を足したものです。

background-clip が content-box だと背景が要素の余白を含みませんが、padding-box, border-box(既定値) の時は要素の余白を含みます。

パディング : 詰め物, 水増し, 埋草

  1. <div style="padding: 1em; width: 3em; height: 2em; box-sizing: content-box; outline: 1px solid; border: 1em solid transparent; background-clip: padding-box; background-color: #ccffff;">
  2. <div style="width: 100%; height: 100%; box-sizing: content-box; background-color: #ffffff;"></div>
  3. </div>

background-clip: padding-box; を指定してパディング領域に背景を指定して、コンテンツ領域には子要素を幅，高さ100%で埋めて親の余白を視覚化してみた例示です。

一二三四五六七

background-clip: padding-box; を指定した場合の背景の範囲を示す例示です。合わせて幅，高さともに100%とした子要素を用意してコンテンツ領域を区切る仕掛けも用いています。
outline を指定して、要素の輪郭線を視覚化しています。
border: 1em solid transparent; と指定して他の指定値を意図的に存在させる事により、幅，高さが何を表しているかを実感したいと例示しました。
background-clip: padding-box; で背景をパディングの外側の辺まで拡張して境界の下には背景が描かれない指定をして、background-color で背景を指定しています。
コンテンツ領域の視覚化として、子要素に背景を指定して表しています。

インライン要素でもパディングは効果がありボーダーの位置を決めます。
ただ行間ではなくボーダーとの位置なので、インラインコンテキストの整形とかを考えて左右（前後）に疑似要素とか使う場合の調整用とかに限る方が良いと思われます。

paddingプロパティには auto はありません。親要素を元に計算値とするか整形用のブロック要素を用意する必要があります。

4.ボーダー領域

マージン領域
ボーダー領域
パディング領域
コンテンツ
領域

ボーダー領域 (border area.)とは、ボーダーエッジ(border edge.) に囲まれた領域(area.)で、パディング領域(padding area.)に要素の境界を含めて拡張したものです。

ボーダーエッジはボックスのボーダーを囲みます。ボーダーの幅が 0 の場合、ボーダーエッジはパディングエッジと同じになります。4つのボーダーエッジによってボックスのボーダーボックスが定義されます。 各エッジは、上, 右, 下, 左のエッジに分けられます。

box-sizing: border-box; の場合、要素に指定した幅，高さはこのボーダー領域の幅，高さです。box-sizing: content-box; (既定値) の場合、要素に指定した幅，高さは、コンテンツ領域の幅，高さです。 その場合のボーダー領域の幅は、コンテンツ領域の幅に右パディングと左パディングと右ボーダーと左ボーダーの幅を足したものです。 ボーダー領域の高さは、コンテンツ領域の高さに上パディングと下パディングと上ボーダーと下ボーダーの幅を足したものです。

background-clip が border-box (既定値) だと背景が境界を含みますが、それ以外の時は境界を含みません。

ボーダー : 境界
※ ボーダー境界(エッジ)というと、境界の境界という分かりにくい事になっています。 ここではボーダーは、ボックスに於いての境界という意味になります。 ボーダー境界(エッジ)の境界(エッジ)は、ボーダー領域の境界という意味になります。

  1. <div style="border: 1em solid #ccffff; width: 5em; height: 7em; box-sizing: border-box; outline: 1px solid; padding: 1em; background-clip: content-box; background-origin: content-box; background-image: url('./risyu.svg'); background-size: 100%;"></div>

width: 5em; で幅を５文字分としています。余白と境界も上下左右に各１文字分を指定していますが、左の輪郭線と右の輪郭線の幅は５文字分となりコンテンツ領域の幅は１文字分となりました。
高さも同様の計算となります。

一二三四五

box-sizing: border-box; を指定した場合の、幅，高さの指定がどこを示すかの例示です。
outline を指定して、要素の輪郭線を視覚化しています。
padding: 1em; と指定して他の指定値を意図的に存在させる事により、幅，高さが何を表しているかを実感したいと例示しました。
border: #ccffff; で境界の色を指定する事で境界線を視覚化しています。

box-sizing の既定値である content-box は、width, height の指定をコンテンツ領域の幅，高さの指定とします。
content-box が既定値であるが故に、つい余白や境界の幅，高さを忘れがちになり、包括コンテナから溢れる事があります。

5.マージン領域

マージン領域
ボーダー領域
パディング領域
コンテンツ領域

マージン領域 (margin area.)とは、マージンエッジ(margin edge.) に囲まれた領域(area.)で、ボーダー領域(border area.)に要素の余白・間隔を含めて拡張したものです。

簡単に言うと隣接するブロックとの距離をとる為の領域です。余白と言うか隙間というか。
ただマージンには相殺があるので、領域としてとらえるのにも注意が必要です。

マージンエッジはボックスのマージンを囲みます。マージンの幅が 0 の場合、マージンエッジはボーダーエッジと同じになります。4つのマージンエッジによってボックスのマージンボックスが定義されます。 各エッジは、上, 右, 下, 左のエッジに分けられます。

マージン : 余裕, 余白, 欄外

  1. <div style="outline: 1px dotted; width: 5em; color: #000000; background-color: #ccffff;">
  2. <div style="background-color: #ffffff;">隣接要素</div>
  3. <div style="margin: 1em; width: auto; height: 2em; box-sizing: border-box; outline: 1px solid; background-color: #ffffff;"></div>
  4. <div style="background-color: #ffffff;">隣接要素</div>
  5. </div>

包括している上位の要素に width: 5em; で幅を５文字分として例示しています。マージンを上下左右に各１文字分を指定しているので、自身の要素の左の輪郭線と右の輪郭線の幅は３文字分となりました。
上マージンは１文字分で、先のテキストと１文字分の上下の間が空いています。下も同等です。

隣接要素
隣接要素

outline を指定して、要素の輪郭線を視覚化しています。自要素は実線で親要素は点線です。
自要素を width: auto; と指定する事で右マージンも視覚化しています。
自要素の前後にテキストがあるのはマージンの相殺の回避の為です。 (親要素を outline でなく border で視覚化という手段もありますが…)

幅や左マージンと左右の余白(padding)などが指定されている場合(autoを除く)、右マージンの指定は無視されて auto として計算される場合があります。

マージンには相殺される場合があります。親と先頭，末尾の子要素の相殺や、隣接する兄弟要素の相殺や、空要素の相殺などです。

マージン側の相殺とかと違いますが、float の機能というかclearプロパティの機能からして、clear で指定してもその要素の上マージンは無視されるので。