CSS基礎知識

1.ブロックレベル要素

ブロックレベル要素とは昔風の解説で言うなら、改行を伴う要素です。 上記の例では青いボーダーの要素です。
HTML4.01 Strictでは次の要素がこれにあたります。

p div table dl ul ol form address
blockquote h1 h2 h3 h4 h5 h6 fieldset hr pre

ブロックレベル要素の特徴は、親要素の内容幅全体に広がって配置されます(上記の例では黒い二重のボーダーが親要素のボーダーです)。 つまり、ブロックレベル要素の横に他の要素は(通常フローなら)並べることができません。 このような特徴からボーダーが(見えて)ない時の様子から「改行を伴う」と言われています。
CSS2ではブロックレベル要素は矩形(四角形)で表現されると考えると簡単に理解できるかと思います。

2.インライン要素

ブロックレベル要素に対し、文中の一部分にだけ意味づけや、 書式設定を行うものをインライン要素と言います。 上記の例では赤いボーダーの要素のことです。
例として以下のものがあります。

a abbr acronym b bdo big cite code
dfn em i kbd label q samp small span
strong sub sup tt var

上記の例にあるように、要素中に改行が混じるとやや複雑な形で表示されます。 これはインライン要素によって生成されるボックスは改行によって複数に分割されることがあるためです。 この分割された面にはborder, margin, paddingはその表示が行われません。
また、インライン要素は(原則として)ブロックレベル要素をその子孫要素として持つことができない、と覚えておいてください。 この件に関しては別の記事で詳しく説明します。

3.インラインブロック(置換インライン)要素

インライン要素のように改行は伴わないのですが、幅(width)や高さ(height)を持つ、 インラインブロック要素と呼ばれるものもあります。 見た目に関する決まり事はブロックレベル要素、文法上はインライン要素、といったイメージが近いと思います。
具体的には次の要素です。

button img input object select

4.ブロックレベル要素とインライン要素の比較

	ブロックレベル要素	インライン要素
高さ(height)	指定可	指定不可
幅(width)	指定可	指定不可
左右のマージン(margin)	要素の左右に存在	最初の文字の左側と、最後の文字の右側に存在
左右のパディング(padding)	要素の左右に存在	最初の文字の左側と、最後の文字の右側に存在
左右のボーダー(border)	要素の左右に存在	最初の文字の左側と、最後の文字の右側に存在
上下のマージン(margin)	要素の上下に存在	無視され、レイアウトに影響は無い
上下のパディング(padding)	要素の上下に存在	全ての行に存在し、ボーダーの位置に影響が出る
上下のボーダー(border)	要素の上下に存在	各行に存在するが、他の行に重なる場合がある