ブロックレベル要素とインライン要素を意識する

CSSを使っていくうえで、対象となるタグがブロックレベル要素なのかインライン要素なのか、意識しておくことは大切です。これら区別されているからには性質は異なりますし、CSSにおいても少しだけ違いがあります。ブロックレベル要素は、レイアウトの役割をするものに対して、インライン要素は内容に関する役割をするものです。また、インライン要素は、何かしらのブロック要素で囲われているのが望ましいです。この辺りの感覚は、Webサイトを作っていくうちに自然と身についてくるところなので、それほど固執しなくても良いでしょう。

ブロックレベル要素adress blackquote div dl fieldset form h1～h6 noframes ol p pre table ul
インライン要素a abbr acronym br button cite code dfn em iframe img input kdb label object q ruby samp small span strong sub sup textarea var
ブロックレベル要素とインライン要素の違い

こういうのは理屈で覚えるようりも頭の中でイメージしてしまうのが一番良いと思います。下の図のように、ブロックレベル要素の横幅は、CSSで何も設定されていなければ、画面いっぱいに領域を確保します。縦の領域はブロックレベル要素の内容によって伸縮します。そして、次に記述したブロックレベル要素は、その下に続きます。また、imgタグやspanなどのインライン要素の場合は、ブロックレベル要素の横幅のゆるす限り、横に表示されていきます。

下の図

例えば、ブロック要素の幅を画面いっぱいではなく半分にしてみたり、ブロック要素とブロック要素の間隔を設けたり、またはブロック要素とブロック要素を横に並べたりする、それらデザインに関することはCSSで行う要領です。

CSSの指定が全くされていない場合は、図のように隙間なくブロックレベル要素は敷き詰められていくのですが、どのブラウザにも最初からデフォルトのスタイルシートが設定されています。従ってh1タグでマークアップすれば、当然文字は大きくなりますし、上下のマージンもある程度設けられるはずです。これは、そのブラウザ自身のスタイルシートによって、見栄えが決められていることを押さえておきましょう。
補足として
CSSのプロパティによっては、インライン要素には適応されないのもあります。例えば、よく使うCSSのプロパティの代表格である、floatやwidthは、ブロックレベル要素と一部のインライン要素に有効なプロパティです。従って、spanなどのインライン要素にそれを指定しても意味がありません。ただし、IE特有のバグで、有効になってしまう場合もあるのが厄介なところ。こういった点をきちんと把握しておかないと、意図した通りのレイアウトにならないことも多々ありますので注意が必要です。