ウェブサイト構築のヒント集 ＞ 「ブロック要素とインライン要素」
要素は二種類に大別されます。 h1...h6、p、pre、hr などはブロックレベル要素と呼ばれます。 ブロック要素は行単位で構成される為、ブロックレベルの最も小さい形態は「一行」となります。 特殊な例を除いたら、ブロックレベルの中にブロックレベルを入れるコトはできません。
table はブロックレベルに属しますが、tr や td といったブロックでもインラインでもない特殊な要素を含まなくてはなりません。
margin、width、height、overflow などはブロックレベルだけに適用するプロパティです。
span、strong、em、img、a（ <a href="xxx.gif"> ）などはインラインレベル要素と呼ばれます。 インライン要素は行に組み込まれる要素であり、最小単位は「一文字」となります。
インライン要素はブロック要素の内側に入れるコトができます。 インライン要素の中にはインライン要素しか入れるコトができません。
・間違った例１
<em>強調しつつ<cite>出典元も記載</em></cite>しました。
... em も cite もインライン要素なんですが、タグでタグをまたいではいけません。
<cite>（開始タグ） と </cite>（終了タグ）の間に
</em>（終了タグ）が存在するのは間違った記述となります。
<em>強調しつつ<cite>出典元も記載</cite>しました。</em>
上記のように書き直せば O.K です。
・間違った例２
<a href="xxx.html">ファイル壱へリンク<a href="yyy.html">ファイル弐へリンク</a></a>
... a は中に img などのインライン要素を入れるコトができます。
ただし、「 a 要素」の中に「 a 要素」を入れるコトはできません。
例えば、line-height は行の高さを示すプロパティですが、 ブロックにもインラインにも適用できます。 ブロックにて用いれば各行の高さを規定し、 インラインにて用いればインライン内の高さソノモノになります。 行の概念も重要であり、複雑なレイアウトにしなければ文字と文字は平行線上で（一直線に）整列する仕組みです。
blockquote と div はブロックレベル要素ですが、他のものとは勝手が違うので注意が必要です。
block-quote は直訳すると「かたまり引用文」という意味になりますが、 長文を引用したときに使用されます。 <blockquote> ... </blockquote> で囲まれた中に直接テキストを挿入するコトはご法度であり、 以下のようにブロックレベル要素を内部に入れる必要があります。
<blockquote> <p> e-ビジネスの構築により、 画期的な受発注システムを確立。 </p> </blockquote>
また、div も blockquote と同様にブロックレベル要素を内包するコトができます。 div の中に div を入れるコトも可能です。 ただし、div は論理的な意味を持たない要素なので、 <div>構造</div> という具合にしてしまうと中身のテキストは 何の意味付けもされていない無所属テキストになってしまいます。 一応、この点は注意しておくべきかと思います。
div は正にレイアウトの為にあるような要素であり、 複数のブロック要素をグループ化しての配置ができる便利要素です。 ただし、position、float、overflow を指定しないのであれば、使う必要は無いハズです。 極力使わないで済む方法を考えましょう。
要素の中に要素を詰め込む際にはルールがあります。 ただし、一般的なルールで括れない要素（blockquote、ul、ol、li、dl、dt、dd、table、caption、tr、th、td ... など） もありまして、それらは一般論とは若干違う独自の入れ子ルールを持ちます。
入れ子構造の一般的なルールは以下のようなものです。
div ＞ ブロックレベル（div含む） ＞ インライン ＞ インライン ＞ 文字
<div> <p> 要するに<span>貧乏かつヒマヒマ</span>なので、 結論としては<strong>省エネで節約</strong> となります。 </p> </div>
このイメージ画像で理解してくださいますか？