HTML＋CSSでレイアウトを組んでいて、思うようにいかないとき。
いろんなサイトで情報を集めていてよく出てくる説明に「インライン要素」と「ブロック要素」の違い、というものがあります。
「このCSSのプロパティはインライン要素では効きません」とか「そのタグの書き方はインライン要素でブロック要素を囲ってるので×」とか時々見かけます。
CSSを勉強しはじめた頃、こんな説明に出くわして「インライン？ ブロック？ それって何？」「同じタグなのに違いがあるの？」となった経験が私もあります。
２つの「要素」の違い
HTMLに使うタグ（<p>とか<img>とか）は、このどちらか２つに分類できます。
ちなみにここでいうタグは、<BODY>～</BODY>の中で使うタグに関してです。
<HEAD>の中で使う<META>や<TITLE>なんかは含まれません。（←そもそもHEAD内のタグはCSSでどうこうするわけじゃないから関係ないし。）
■ブロック要素 …段落を持つ文章のまとまりに使うタグ （インライン要素を囲んでOK)
■インライン要素 …文章の中の一部に関するタグ （ブロック要素を囲んだら×）
私は、この２つのいちばん大きな違いは「幅」、「高さ」、「位置」など「枠（四角形）」としての取り扱いができるかできないかだと思っています。
ブロック要素は初期値では「幅＝100%」です。
おおざっぱにいえば、ブロック要素は「幅」と「高さ」を持ってますが、インライン要素は持たない。
インライン要素はあくまで「文章の流れの中の一部」だと考えるべきもので、幅も高さも、そして位置も流動的です。
それに対してブロック要素は幅○○px、高さ○○px、位置は上から○○px、左から○○px、といった明確な指定がCSSで可能です。
どのタグがどの要素に属するか
上記の判断基準に照らせばだいたい分かるのですが、よく使うものについてきちんと分けてみました。
■ブロック要素（思う着く限りで）
○段落 … p
○見出し … h1～h6
○リスト … ul / ol /dl (li / dt / dd についてはインライン要素としてのCSS指定も可能）
○引用 … blockquote
○その他 … … div / table / tr / td / hr / form
■インライン要素
○a(アンカー） / img（画像） // br（改行） / span / font / b , strong , em （強調） など、文字装飾やぶんｓによく使用するタグ
○input , textarea / select などのフォームパーツ
○iframe （インラインフレームなのでインライン要素です）
■インラインブロック(置換）要素 …上のインライン要素とかぶってますが、インライン要素でありながらブロック要素としての性格も持つという紛らわしいもの
○img（画像） / button , input ,select / object / iframe など
インライン要素で一番の注目は a （アンカー）タグですね。
a:hoverなどでマウスを当てたときに変化をつけたりするCSS指定はおなじみといってもよいかと思います。
img要素は、画像としての幅と高さを持っているのでブロック要素と間違われがちですが、文書と組み合わせた時には文字と同じように流動的な配置になっていきますから、インライン要素として取り扱われます。imgにfloat指定することで、左上、右上に位置固定したように見せることができますが、文字の量が少なかったりするとレイアウト崩れを起こすことはよくあります。これもimgがブロックではなくインライン要素だからです。
CSSの取り扱い
冒頭で書きましたが、CSSの指定が思ったようにいかないときに問題になるケース。
いわゆる「ブロック （or インライン） 要素では効かない」CSSです。