CSSで重要なボックスモデル

CSSボックスモデルは、HTMLなど文書要素それぞれにその周囲を取り囲む矩形領域を持つと考えます。 その矩形領域は、余白、枠、パディング、コンテントで構成されます。

マージン(margin)

ボックスの最も外側の領域で他の要素との余白部分をマージンといいます。 要素に指定された背景は、マージン領域では常に透明で、親要素の背景を透過します。

ボーダー(border)

パディングの周囲を囲む枠をボーダーといいます。ボーダーは、背景の上に描画されます。

パディング(padding)

内容(content)とボーダーとの間の空間をパディングといいます。 要素に指定された背景は、このパディング領域にも表示されます。

内容(content)

文書テキストや画像等の領域をコンテントといいます。 背景関係(background)で指定された属性は、このコンテント領域にも表示されます。

マージン、ボーダー、パディングは、それぞれ上下左右の4つに区分され、 それぞれ個別に値を指定することができます。

このような、ボックスモデルという考え方がグリッドデザイン(グリッドシステム)といわれる 格子状に仕切った枠にはめていくレイアウトにつながっているのでしょうか・・・