divタグの前後で改行が入ってしまう: ブロック要素とインライン要素

問題

[ 1 ]というカッコ囲みの表記を動的にしたいとき

[ <div id="hoge"></div> ]
などとして、$('div#hoge’)に値を入れて動的に出力したいときがあるが、
実際は

[
1
]

などとなってしまう。

原因

divタグはブロック要素なので、改行が入る。

解決策

divタグの代わりにspanタグを使う

spanタグはインライン要素なので改行が入らず、1行の中で扱うことができる。
divとspanの2つが存在することからこちらのほうが自然な書き方である。

CSSでインライン要素にしてしまう

どーーーーしてもdivにする必要がある場合、
CSSでdisplay:inline;などと指定してやるとdivだけどインライン要素という設定ができる。(参考 2.参照のこと)

参考ページ

1. < DIV > と < SPAN >
2. html css divタグが改行されるのを改行させない