2010/05/29 css を使っていると div と span は同じ様で違うことに気づく

 

div と span の説明で、

 

・div は前後に改行が入るもの

 

・span は前後に改行が入らないもの

 

という記述だけの説明を見かけますが、これだけでは勘違いして使用してしまう

場合があります。

 

また、

 

div はブロックレベル要素、span はインラインレベル要素

 

という表現だけでは、イマイチ違いが伝わりません。

 

 

div / span の違いで重要なのは、

 

 ・span だと改行された後の margin 定義が無効になる

 

 ・span だけでは text-align が有効にならない

 

などの相違があります。

 

margin に関しては、以下の HTML コードを表示してもらえるとわかりやすいかと

思います。

 

【ソースコード】

<span style="margin: 0 0 0 20px;">
spanスタイルを適用<br>
します。<br>
</span>

 

<div style="margin: 0 0 0 20px;">
divスタイルを適用<br>
します。<br>

</div>

 

　　　↓  HTML で読み込むと

 ---------------------------------------------------------------------

spanスタイルを適用
します。

divスタイルを適用
します。

 ---------------------------------------------------------------------

 

 

ソースコードでは左のマージンを 20px 空けるように定義しているのですが、div は

ブロック要素なので div で囲まれてる区間は、改行されても認識します。

 

span はインライン要素なので、改行があった場合、以降のテキスト行には style が反映

されません。

 

css で言うと div は display: block;  で span は  display:inline; ですね。

 

 

上記の動作であるという確認は、IE6/IE7/opera10.51 /firefox 3.6.3/gecko でそれぞれ、

共通の結果が得られる事を確認取りました。

 

文章に複数行が存在している場合で css の効果を与えたいときは、div を使うか１行毎に

 span で囲ってやる必要があるということですね。

 

また細かい所で span / div で結果が異なるので、

 

改行の違いだけではない

 

ということを意識するのは必要かもしれません。