CSS3

：

：

ボックス モデル

　 編集：2022.07.14 by T.A.

→●

各ボックスの様子：

内容辺（content edge）、または内縁辺（ inner edge ）
4 側にある内容辺は、ボックスの内容ボックス（content box）を定義する。

要素の内容や包含ブロックのサイズに依存することが多い。

パディング辺（padding edge）
パディング辺は、ボックスのパディングを囲う。ある側のパディング幅が 0 ならば、その側にあるパディング辺と内容辺は一致する。

4 側にあるパディング辺は、ボックスのパディング ボックスを定義し、ボックスの［内容区画、パディング区画］を包含する。

ボーダー辺（border edge）
ボーダー辺は、ボックスのボーダーを囲う。ある側のボーダー幅が 0 ならば、その側にあるボーダー辺とパディング辺は一致する。

4 側にあるボーダー辺は、ボックスのボーダー ボックスを定義し、ボックスの［内容区画、パディング区画、ボーダー区画］を包含する。

マージン辺（margin edge）、または外縁辺（outer edge）
マージン辺は、ボックスのマージンを囲う。ある側のマージン幅が 0 ならば、その側にあるマージン辺とボーダー辺は一致する。マージン幅が 0 ならば、マージン辺はボーダー辺と同じになる。

4 側にあるマージン辺は、ボックスのマージンボックスを定義し、ボックスの［内容区画、パディング区画、ボーダー区画、マージン区画］すべてを包含する。

¶マージンにはアウトライン（outline（外形線））も含む。DIV 要素にアウトラインを付けた場合、アウトラインの幅がマージン幅より大きい場合、マージン辺をはみ出す。よって、周辺の要素に重なる…などの影響を与えてしまう。

テスト
HTML：

ここに表示
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：