HTMLソース上の改行・タブ・空白(スペース)の扱い: インライン要素 ブロック要素とCSS white-spaceプロパティ
【更新情報】表示がおかしくなっていた部分を削除
空白文字の扱い
原則的に、HTMLのソース上の改行・タブ、そして半角の空白文字（半角スペース）は、基本的にそれらがいくつあってもひとつの半角スペースにまとめられる。
＃ 全角スペースは空白文字ではなく、HTMLに限らず元からひとつの文字。
<span> [< - タブや空白][改行->] 表示する 文字列 </span>
表示する 文字列
よって、ソースの整形（フォーマット）で以下のようにすると、意図しない空白ができてしまう。
<span> <span> 表示する </span> <span> 文字列 </span> </span>
表示する
文字列
ただし、文末＝終了タグ直前の空白文字（タブ、半角スペース、改行）はインライン要素であってもすべて無視される。
<span> [< - タブや空白][改行->] 表示する 文字列 [< - 文末のタブや空白][改行->] </span>
表示する 文字列
一方、インライン要素以外の要素（ブロックレベル要素など）では、開始タグと終了タグそれぞれの前後の改行・タブ・半角スペースは、すべて無視される。
<div> [< - タブや空白][改行->] 表示する 文字列 </div>
よって、インライン要素でなければ、以下のようにソースを整形しても問題ない。
<div> <div> 表示する </div> <div> 文字列 </div> </div>
pre/blockquote要素
改行・タブ・半角スペースをソースのまま表示したい場合は、pre要素やblockquote要素を使う。
<pre> [< - タブや空白][改行->] 表示する 文字列 </pre>
表示する 文字列
タグ直後の改行
なお、pre/blockquote要素もブロックレベル要素なので、開始直前・終了タグ直後の空白文字はすべて省略されるが、タグ内側の先頭・末尾のみそれらが2つ以上連続した場合はそのまま表示される。
そのため、以下のような書き方をしてしまうと、前後に不要な改行やスペースが入ってしまう。
<pre>[改行] [改行] 表示する文字列[改行] [改行] </pre>
表示する文字列
<pre>[半角スペース2つ]表示する文字列[半角スペース2つ] [改行] </pre>
表示する文字列
注意点
なお、これらはあくまでHTMLの仕様であって、XMLではすべてそのまま文字として扱われる。
つまり、XMLでは基本的に整形用途で、余計な改行・タブ・空白をあまり入れないほうがいい。
インライン要素の整形
インライン要素を、余計な空白や改行なしで改行して整形する方法について。
上記のとおり、インライン要素のタグの前後にある改行・タブ・空白は省略されることがないので、ソースで以下のように書くと表示上でも改行したとみなされる。
<span>abc</span> <span>bcd</span> <span>cde</span>
bcd
cde
これを整形しつつ、次のように表示する方法を紹介。
対策1：終了タグの一部を改行する
<span>abc</span ><span>bcd</span ><span>cde</span>
見た目は不格好だが、仕様上問題はない。
対策2：コメントを利用
<span>abc</span><!-- --><span>bcd</span><!-- --><span>cde</span>
対策3：CSSでブロック要素にし、「float: left;」を指定
＃ これは最終手段。まったくおすすめしない。
下記で説明するように、CSSのdisplayプロパティでインライン要素をブロック要素に、またその逆にすることもできる。
block、またはinline-blockを指定し、「float: left;」を設定する。
display: inline-block; float: left;
ただし、この場合では次の要素で「clear: both;」を指定しないと、以降の表示が意図しないものになってしまう。
注意点
上記のようなことをしなくても、素直にインラインで（一行で）書けば問題ないのだが、長くなると可読性が悪くなる。
他に、CSSでmarginにマイナス値を指定して見た目上スペースを消す方法もあるが、そもそも半角スペースをどれだけの幅で表示するか、実装しだいであったり、CSSのletter-spacingの値やフォントサイズなどによって左右されたりするので、おすすめできない。
そもそも、コードの整形のためだけにCSSまで使うべきではないだろう。
インライン要素とブロック要素とそれ以外
HTMLの各要素は、インライン要素・ブロック要素・それ以外の要素の3つに分けられる。
インライン要素
その名のとおり、テキストの一行内における部分的な要素のようなもの。
幅や高さの概念はなく、CSSでdisplayプロパティを変更しないかぎり、内部（子孫に）にブロック要素を持てない。
例：span b
<span>ここ</span>は<b>一行</b>です。
ブロックレベル要素（ブロック要素）
テキストでいえば、段落。
通常、親要素の横幅いっぱいまで幅を持ち、複数記述した場合、垂直方向に並べて表示される。
要素によって、内部に持てる他の要素が異なる。
ちなみに、bodyはブロック要素ではない。
例：div p
CSS：インライン/ブロックの変更
displayプロパティを変更することで、任意の要素をインライン要素にしたりブロック要素にしたりできる。
inline
対象要素をインライン要素にする。
よって、内部（子孫）にブロック要素を持っていると、表示がおかしくなる。
block
対象要素をブロック要素にする。
inline-block
インライン要素とブロック要素の両方の性質を合わせ持つ。
width、heightを指定できるインライン要素のようなもの。
インライン要素と同じで、対象タグの前後にある空白文字は省略されない。ただし、内部のテキスト・要素の前後にある空白文字は、ブロック要素と同じで省略される。
ここはややこしいので注意しよう。
CSS：white-spaceで空白文字の扱いを変更
実は、要素内の空白文字をどう処理するか＝表示するかは、CSSのwhite-spaceプロパティで挙動を変更することができる。
適用できる値は次の5つで、1行が要素の幅を超えた場合に行を折り返すかどうかも挙動が異なる。
＃ ただしどの値でも、スペースや改行をまったくなくすことはできない。
normal
デフォルト値（初期値）。
空白文字はひとつにまとめられ、長い1行は折り返される。
div要素やp要素をイメージするとわかりやすい。
nowrap
基本はnormalと同じ。
ただし、その名のとおり、1行は折り返されない。
pre
pre/blockquote要素と同じように表示する。
基本的に、空白文字は入力どおりそのまま表示される。
ただし、要素内における先頭・末尾（開始タグの直後と終了タグの直前）の空白文字は、ひとつだけの場合は省略され、2つ以上続く場合はそのまま表示される。
1行の折り返しはない。
pre-wrap
基本はpreと同じだが、要素の幅に合わせて1行が折り返される。
pre-line
これが一番わかりにくい。
改行のみすべて入力どおりそのまま表示され、それ以外の空白文字は1つにまとめられる。
ただし、pre要素とは異なり、要素内における先頭・末尾（開始タグの直後と終了タグの直前）の改行を除く空白文字は、すべて省略される。
要は、基本的にdivなどのブロックレベル要素と同じで、改行の扱いのみpre-wrapと同じということ。
なので、長い1行は自動で折り返される。