東京Kです。
良い話のネタが思いつかなかったので、簡単に載せられるネタで。お盆ですし。
というわけで、知っている人は皆さん知っているけど知らない人は全く知らない、HTMLにおけるスペースの種類をまとめてみました。
意外と新人さんが、半角スペースをたくさん書いても幅が変わらない!ってはまるんでね。
半角空白
英語などの言語では、日本語のように助詞で単語を区切るのでは無く、空白文字で区切りられる。
HTMLでは、半角空白やタブや改行は英文の単語区切り文字として認識する。
その結果、半角スペースをたくさん書いても1つのスペースに置き換わったりする。
また、HTMLでは、行末近くで空白文字を見つけたら、その位置で折り返し(改行)を自動的に行う。単語中でも折り返したければ、後述の<wbr>タグで。
全角空白
全角スペースが表示される。というか、ほかの日本語文字と同じ扱いなので、書けば書いた分だけ空白が表示される。
改行
HTMLでは半角空白と同等の意味を持つ。
改行したければ<br>タグでどうぞ。
※なお、段落の区切りは<p>タグでどうぞ。
単なる空白の実体参照文字と思われがちだけど「改行しない空白」と言う意味。
半角空白は、行末での折り返しの目印として使われるが、 は行末の折り返しのためのスペースとしては使われない。
また、半角空白と異なり、たくさんあれば、その分スペースが入る点も、半角空白と異なるポイント。
 
「Mと同じ幅のスペース」と言う意味。
※CSSのサイズ指定で使うemと言う単位のsp(space)という意味。
 
「Nと同じ幅のスペース」と言う意味。mの大体半分。
和文では半角スペースと同じ。
番外:<wbr>タグ
「空白は無いが改行可能」と言う意味。
前に書いたとおり、通常、HTMLでは単語の途中で文字が折り返さないが、長い英単語の途中で改行が起きて良い部分に入れると、単語の途中であっても折り返しが発生する。
日本語の文章には空白が存在しないため、ブラウザは折り返し位置を判断できないことがある。このような場合に、苦肉の策で使うことも過去にはあった。