CSS(スタイルシート)講座：各ブラウザの互換性を考慮したCSSを学びたい人にオススメ！
ブロック要素とインライン要素
このページではXHTML(HTML)やCSSを理解するためには避けて通れない要素であるブロック要素とインライン要素を説明します。
ブロック要素とは？
ブロック要素（ブロックレベル要素）とはページの行を範囲とする要素のことであり、前後に改行が自動的に入ります。
XHTML（strictなページでは）のbody要素直下にはブロック要素を必ず置く必要があります。
主に、p、h1～6、ul、div要素などがブロック要素にあたります。
説明だけでは分かりにくいかも知れませんので、実際にCSSを使った実例を紹介します。
上記の例ではdiv要素に対して背景色を指定しています。
幅一杯に背景色が塗られていますよね？これがブロックレベル要素です。
インライン要素とは？
インライン要素（インラインレベル要素）とは、その要素の内容自身が範囲になります。インライン要素の前後には自動的に改行は入りません。
また、body要素直下にはインライン要素を置いてはいけません。
主に、a、img、strong、span要素など該当します。
上記例ではspan要素に対して背景色を指定しています。見て分かるとおりブロック要素とは違い文字の後ろだけが塗られています。 これがインライン要素です。
上記の例はインライン要素を3つ並べた例です。インライン要素は前後に改行が入らないため、1行に並んで表示されます。
また、インライン要素内にブロック要素を含めることはできません。
CSSでブロック要素をインライン要素に変換する
CSSのdisplayプロパティを使用することで、要素の特性を変更できます。
p{ display : inline ; }
a{ display : block ; }
span{ display : none ; }
上記例では本来ブロック要素であるp要素をインライン要素に、インライン要素であるa要素をブロック要素に変換しています。
3行目のdisplay:noneはspan要素を表示させないようにします。
また、CSSを使った要素の特性の変更はあくまで視覚的に変化があるだけで本来の意味は変わりません。 つまり、本来ならブロック要素はインライン要素を包含できますが、ブロック要素に変換されたa要素はインライン要素を包含できません。 （XHTMLの文法的にエラーになります。）
