XHTML+CSSの「ボックスモデル」の復習

XHTML+CSSの「ボックスモデル」の復習

XHTML+CSSでページを制作する場合、必ず理解していないといけないのが「ボックスモデル」です。
ボックスは以下のプロパティで構成されます。

01

  • border(ボーダー): 枠線
  • margin(マージン): 枠線の外側の余白
  • padding(パディング): 内容と枠線の間の余白
  • width(幅): 内容(コンテント)の幅
  • height(高さ):内容(コンテント)の高さ

以上の 5 つで構成されています。

ボックスモデルでよく勘違いしてしまうのが width の値です。
ボックス全体の幅、もしくは border と padding を含む幅と思ってしまいがちですが、実際は内容(コンテント)の幅が width の値になります。

ですので、ボックス全体の幅は、

margin(左右のマージン)+border(左右のボーダー幅)+padding(左右のパディング)+width(内容の幅)
ボックスの幅
となります。

また、高さも同じで、

margin(上下のマージン)+border(上下のボーダー幅)+padding(上下のパディング)+height(内容の高さ)
ボックスの高さ
となるので注意しましょう。

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ