ブロックとインライン | CSS電光石火

• display:block;とdisplay:inline;

•  

CSS初心者が見落としがちなものとして、ブロック要素とインライン要素が挙げられます。
ブロック要素が箱、インライン要素が行として定義付けられており、文中の内容物にはインラインを、文章や装飾の外枠にはブロックを指定するのが普通です。
厳密に言うと、高さを指定できる箱で、かつ文末に改行コードが付加されるものがブロック要素、高さは自由にならない代わりに、文章内部へと挿入できるのがインラインであるといえます。
ノートの中身がインラインで、ノートそのものがブロックであると表現すると分かりやすいでしょうか。
ちなみに、代表的なブロック要素がdiv要素で、代表的なインライン要素がspan要素です。両者にはマークアップ上の意味づけがなされておらず、無色透明の要素であるため、様々な場面において活躍します。
なお、意味づけを持つ代表的なブロック要素はp要素だと思います。これは段落をあらわす要素で、文章と文章の間を区切る役割を果たします。
また、非推奨ですがb要素などは文字を太くするインライン要素です。strongやemもインラインです。
このように、具体例を挙げるとなんとなくイメージが掴みやすくなったのではないでしょうか。普段文中に使っているタグがインラインであった、という事がなんとなく理解できたと思います。

インライン要素でも、floatを掛ける事によって、inline-blockのような働きをする事もあり、上記の記述は一律とはいえませんが、float等特殊な事をしない限りは、inlineはinlineのまま、blockはblockのままです。