ブロック要素とインライン要素

 CSSを使っているとブロック要素とインライン要素という言葉がよく出てくるのですが、この違いわかりますか?もうかなりCSSを使い込んでいても案外わからなかったりするのがここらあたりではないでしょうか?
 実際にCSS製作していると感覚的にもうだいたいわかっていることなのですが、ここで復習します。
 ブロック要素(block)とインライン要素(inline)は、理屈でいうとブロック要素にインライン要素が含まれているけど、インライン要素にはブロック要素が含まれていないということになります。斬新なデザインをあるアイディアで実行としようという時にはこの理屈は型破りなものになりますが、それ以外ですとはやりブロック要素にインライン要素は含まれます。
 ブロック要素とは、<h1></h1>や<blockquote></blockquote>タグのように一つの塊をつくって最終的には自動的に改行されてしまう要素のことを指します。テキスト間にタイトルタグ<h1>を挿入すると<br />タグがないにも関わらす改行してしまいます。これはこのタグ自体が一つの塊(block)でできているからであってデザイン上独立したボックスになるからです。反対にインライン要素は、<span></span>や<b></b>、<u></u>のようにテキスト中に挿入しても改行することがなくそのタグで囲んだ要素のみが指定のデザインを出力します。
 しかし既存のタグが持っている元々のこのブロック要素とインライン要素を無視したり違った用途で使いたい場合があります。そのような場合には、初期値でブロック要素のものにはインライン要素を、インライン要素のものにはブロック要素を指定することができます。それを指定するのが、display: block; と display:inline;ということになります。
 h1 { display: inline; }ではタイトルの後に改行せずにそのままテキストをつなげることができます。またspan { display: block; }ではタイトルタグのようにspanの後には自動的に改行が入ります。本当のことをいうと改行というのはやや便宜的な言葉でして、実際は構造上の区切りといった方がいいのかもわかりません。ブロック要素は一つの構造上の塊なのでflaotさせたり絶対配置で独立して配置させたりといろいろなことができます。インライン要素はあくまでもテキスト中の修飾を目的としていて構造とはあまり関係がないというよりも、構造上の一番最下層の要素であるということになると思います。