今までのHTML制作では、ブロックとインラインについてはあまり意識されてきませんでした。デザインありきの作り方で、デザインを表現する上で適切なタグが選択されてきました。しかし、最近になってSEOやアクセシビリティの重要性が強調され、「検索サイトが見て理解できる文書構造が明確なページ」が重要視されるようになりました。HTMLの制作は、文書構造として適切なタグを使い、CSSで見た目をコントロールするというやり方に変わってきています。そうした中、ブロックとインラインの表示の切り替えは、デザインをCSSでコントロールする上で便利な手法として広く使われるようになっています。
ブロックとは「まとまり」を意味します。段落（p）や表（table）、見出し（h）、リスト（li）など、文書構造の一つの「まとまり」を意味する要素を一般的にブロック要素と呼びます。インラインとは「文中」を意味します。リンク（a）や画像(img）など、「文中」に登場するマークアップを一般的にインライン要素と呼びます。
端的にいえば、ブロック要素はほかのブロック要素と分離させるために改行されます。インライン要素は改行されません。ブロック要素は文を囲うため、文章の外にpadding（パディング）とmargin（マージン）をとることができます。インライン要素は文中の文字にマークアップされるため、左右のpadding、marginはその要素の文頭と文末に対して適用されます（ただし上下のmarginは効果を持たない）。
ブロックとインラインの表示はCSSのdisplay指定で切り替える事ができます。ブロック要素を改行を加えずに連続して表記したい時は、display:inline;と指定する事でインライン要素のように表示させることができます。逆にインライン要素を一つのまとまりとして見せたい時はdisplay:blockと指定する事でブロック要素のように表示させることができます。
ブロックとインラインの表示設定をうまく切り替えて適用させると、複雑なレイアウトをシンプルなHTMLで表記できるようになるので非常に便利です。たとえばアンカーリンク（a）を引いた文をボタンのように使いたいときに、display:blockとして長方形のブロックのように使う事ができます。また、背景色を文字より広めに付けたい場合は、display:blockとしてpadding属性を加えることで背景色の及ぶ範囲を広げる事ができます。
更新履歴
- 2007/8/7 内容を一部修正