ボックスモデル

CSSの基本的概念
CSSでは、それぞれの要素で生成される領域を「ボックス」と表現します。
ボックスは四角形で成り立つもので、以下の4つのボックスから構成されている。
  1. 要素に含まれる内容
    content
  2. 他の要素とボーダーの余白
    margin
  3. 内容とボーダーとの余白
    padding
  4. 枠線を表すボーダー
    border
ボックスのイメージ
これらの領域は
上(top)
下(bottom)
左(left)
右(right)の4辺に分解する事ができます。
CSSでは4辺にそれぞれ個別のスタイルを設定する事ができます。
ボックスモデルと背景の関係
マージン/margin
パディング/padding
ボーダー/border


TOPへ おタグるーむ