CSS3を勉強したい

CSS3Cascading Style Sheets

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

Webページがブラウザに表示される際、HTMLの各要素はそれぞれ表示領域を確保します。そしてその表示領域をボックスと呼んでいます。

ボックスは、コンテンツを表示する為に確保するコンテンツ領域を中心として、その周囲を囲むパディング領域、ボーダー領域、マージン領域から成ります。コンテンツ領域に、大きさを調整できる余白が取り巻くイメージです。

ボックスモデル

width(横幅)height(高さ)指定が適用されるのは

幅を指定するwidthプロパティと、高さを指定するheightプロパティがありますが、これらプロパティを使って幅・高さを設定できるのはコンテンツ領域に対してだけです。

余白に当たるパディング、ボーダー、マージンの大きさは、padding、border、marginプロパティで調整します。

つまり、ボックスに対してwidth、heightプロパティで幅・高さを指定しても、適用されているのはコンテンツ領域にのみであって、その周りには影響していないということになります。

ブロックボックスとインラインボックス

ボックスは、ブロックレベルで扱われるブロックボックスと、インラインレベルで扱われるインラインボックスに分かれます。つまり、要素にはブロックレベルのものとインラインレベルのものがあるということです。

要素に対するdisplayプロパティの値(blockinlineか)でその状態が決まります。

CSSを記述する際に都度display指定しているわけでなく、各要素、デフォルトでその値が決まっています。

厳密に言えば、ブラウザのデフォルトスタイルシートが、要素に対しブロックかインラインかを指定しています。

インラインボックス
テキストの行に紛れ込むことのできるボックス。テキストや別のインラインボックスがすぐ隣に並ぶことができる。
左から右に、横方向に配置されるイメージ。
width、heightの指定ができない。ただしimg要素やinput要素など、一部指定できる要素がある。
上下のmarginを指定できない。
ブロックボックス
CSSで指定しない限り、親要素のコンテンツ領域いっぱいに広がる。
その幅に関係なく縦方向に配置される。それぞれの要素が1つの段落として扱われるイメージ。
width、heightが指定できる。widthを指定しない場合は、親要素の幅全体に広がる。
上下左右padding、marginの指定ができる。

要素にはデフォルトで設定されているblockとinlineですが、displayプロパティを使って、改めて指定することもできます。例えば元々ブロックボックスである要素を、display: inline;としてインラインレベルで扱うことができます。