hamashun.com

追記：トラバが送れないとの報告を受けて、文末に手動トラバを追加しました。

ナビゲーションなどをリスト要素でマークアップして、display: inline; で横並びにすると、li要素とli要素の間に謎の余白が現れます。
そして、この現象を解決する手段はいくつかあります（参考：リストをinlineで並べた時の余白｜CSS HappyLife）。

でも、この余白はそもそも何者で、なぜ現れるのでしょうか。

余白の正体

結論から言うと、この余白の正体は空白類文字です。 marginやpaddingの暴発ではありません。

では、なぜ何もない場所に急に空白類文字が現れるのでしょうか。 この謎を解くには、まずは空白類文字について調べる必要があります。

空白類文字 1

文書文字集合には、多様な空白類文字が含まれている。その多くは、特定の視覚的スペーシング効果を生成するために何らかのアプリケーションが用いる印刷術的要素である。 HTMLでは、次に挙げる文字だけが空白類文字であると定義される。

• ASCIIスペース ( )
• 水平タブ (	)
• 書式送り ()
• ゼロ幅スペース (​)

行区切り類もまた、空白類文字である。

Paragraphs, Lines, and Phrases (ja) 9.1 空白類 より引用

ここで注目すべきは、行区切り類もまた、空白類文字である。という部分です。 そしてこの行区切り類の項目を見ると、次のように書いてあります。

行区切り類

1つの行区切りは、1つの復帰 (
)か、1つの改行 (
)か、1つの復帰/改行組であると定める。

Paragraphs, Lines, and Phrases (ja) 9.3.2 行区切り類の制御 より引用

復帰と改行、という和訳単語が出てきますが、これはそれぞれCRとLFの事です。 復帰/改行組というのはCR+LFの事です。
（参考：テキストファイル - Wikipedia）
（LF == 行送り == 改行 だと思うんですが、違ったらご指摘いただければと）

空白類文字 2

改行が空白類文字である事が解ったところで、再び空白類文字について調べてみます。 この空白類文字とは何でしょうか。
ばけらさんの用語集に簡潔かつ解りやすく載っていました。

HTML において、ASCII spaceと同様に扱われる文字です。

用語「空白類文字」@鳩丸ぐろっさり (用語集) より引用

ASCII spaceと同様だそうです。 なるほどですね。
・・・実はASCII spaceが解らなかったので、更に調べてみました。

ASCII文字の 32 番目の文字。16進数で言うと 0x20 。いわゆる半角空白のことです。

用語「ASCII Space」@鳩丸ぐろっさり (用語集) より引用

なるほど。 つまり、空白類文字とはHTMLにおいては半角スペースと同じ扱いなんですね。

ここまでのまとめ

行区切り類は空白類文字なので、改行は空白類文字である。 そして空白類文字とはHTMLにおいて半角スペース扱いである。 という事が分かりました。
これで、li要素を改行すると半角スペース分の余白が現れる理由が解りました。 やったね！

新たな疑問

・・・でもちょっと待ってください。 改行はHTMLのソースコードの中にたくさんあります。 li要素にしても、改行をしたら必ず余白が現れるわけでもありません。
空白類文字が現れる場合と現れない場合があるのは、なぜでしょうか？

改行をすると空白類文字が現れるのは、どうやらインラインボックス及び匿名インラインボックスのみのようです。
この辺りに関する仕様書の記述は見つけられなかったのですが、Web標準普及プロジェクトのドキュメントの中に近い物がありました。

上記の例にあるように、要素中に改行が混じるとやや複雑な形で表示されます。 これはインライン要素によって生成されるボックスは改行によって複数に分割されることがあるためです。 この分割された面にはborder, margin, paddingはその表示が行われません。

ブロックレベル要素とインライン要素 - Web標準普及プロジェクト 3.インライン要素 より引用

引用元にはli要素をdisplay: inline; で横に並べているサンプルがあるのですが、これを選択状態にすると、空白類文字がある事がわかります。
インライン要素によって生成されるボックスは改行によって複数に分割されることがあるため、というのはli要素の内容と空白類文字が分割された事であり、この分割された面にはborder, margin, paddingはその表示が行われません。 、というのは空白類文字側の事なのではないでしょうか。

key-childさんからコメントいただきました。
関係ありませんでした。

結論

インライン及び匿名インラインボックス、匿名ブロックボックス内で改行をすると、空白類文字（半角スペース）が表示される。

空白類文字に関しては、もう少し色々とあるんですが、長くなりすぎたので今回はとりあえずこの辺りで。

空白類文字についての補足・及び言及への返信 | Blog hamashun.comへ続きます。

手動トラバ

トラバがうまく送れないという報告を受けたので手動トラバです。
JavaScriptでli要素を一行につなげる - colorhythm
ありがとうございます！