ブロックレベル要素とインライン要素

すごく基本的なことなのですが、これが判っていないとそもそもWEBページ、そしてCSSで組めないと思ったのできちんと書いておこうと思います。

簡単に言うと、箱か箱じゃないかという事だと私は理解しています。
厳密には違うのかもしれないんですけど、WEBページをきちんと組むにはそれで十分だと思います。
じゃあ具体的には？？っていうと

例えばブロックレベル要素でよく使うタグには<div>、<p>、<h1>、<h2>、<table＞があります。
ブロックレベル要素は箱なので、普通は親の要素の一杯一杯に広がって四角く配置されます。
でも幅とか高さの大きさを指定することが出来るし、マージンとかpaddingを指定することも出来ます。
だからそれを使ってレイアウトをしていったりするわけです^^

逆に例えば<span>、<a>、<strong>はインライン要素なので、箱ではありません。
判りやすく言うと文章の中の特定の箇所に書式を設定したり、何か意味を付けるようなタグです。
テキストレベル要素っていう言い方もあるみたいですね。こっちの方が判りやすいですね^^
これらのタグに幅とか高さを設定することは出来ません。
でも、CSSで　display:block;　を指定することで表示上はブロックレベル要素のように箱にする事は出来ます。

※これはあくまで表示上の事であって、インライン要素がブロックレベル要素になるわけではないですよ。

それとすごく大事なことですが、インライン要素の中にブロックレベル要素を配置することは出来ません。例えば<span>タグの中に<h1>タグだったり、<div>タグを入れることは出来ません。
これはすごく当然な事なのですが、きちんとHTMLでは決まり事として定義されています。

一応ブロックレベル要素と、インライン要素を一覧にしてみましたので、確認しておきましょう^^
このタグ何かなぁ・・っていうタグもありますけど＞＜

【ブロックレベル要素】
p、div、table、dl、ul、ol、form、address、blockquote、h1～h6、fieldset、hr、pre

【インライン要素】
a、abbr、acronym、b、bdo、big、cite、code、dfn、em、i、kbd、label、q、samp、small、span、strong、sub、sup、tt、var

CSSでレイアウトしていく場合は主に<div>とかで箱を組んでレイアウトして、必要に応じて<a>とかにディスプレイブロックを使っていく感じですかね^^
すごく大事なことなので、私も再確認のために色々調べてみました。

■外部リンク
Web標準普及プロジェクト　～ブロックレベル要素とインライン要素