実践XHTML+CSSでつくるホームページ講座

ボックスモデル

ボックスモデルとは

前にも言いましたが、CSSを指定していく際に大切なのは、すべての要素がボックスの形になっているということです。
まずそれを細かく見ていきましょう。

ボックスモデル

まず、仮想のボックスを考えてください。
いちばん中には、大切な「内容」「要素」が入っています。
次に、それを囲むように、paddingという空間があります。このpaddingは、中にある内容のバックグラウンドの背景などを表示します。内容だけでいい、この幅がいらない、というのであればなくすことができます。
次に、その外側に、borderという「線」があります。この線も、CSSの指定で幅やタイプを変えられますし、なくすこともできます。
そして一番外側に、marginという幅があります。これは透明で、内容の背景などを表示しません。あくまで他の要素との「幅」をとるためにあります。もちろん、なくすこともできます。

ボックスモデルとは「すべての要素がこういう4重のボックスでできていますよ」ということなのです。
それがきちんとわかっていれば、CSSの指定の30%位を理解したことになるでしょう。
まずは、自分でいろいろと試してみるといいでしょう。