空白ができるのは、改行が空白に変換されてしまうらしいということはわかるのですが、なぜコメントを記述したら空白がなくなるのは何故なのか？というところまで行き着いていませんでいた。

この原理をhxxk.jpの真琴さんが説明していました。

hxxk.jp - 「リストの横並びで不思議な空白ができるアレ、をスマートに解決する」を読んでの自分用の再確認

プログラマの人は文書構造とかに強いのかもしれないけど、Webデザイナーの人ってこういう仕様的なことにうといよね？（私だけですか？）

真琴さんの話はいつもすごくためになるのですが、とっても難しい（笑）

ので、個人的に噛み砕いてみました。

(X)HTMLはDOMツリーで表すことができます。DOMというのは、Document Object Model：文書オブジェクトモデルのことです。

普段、私たちはホームページを作る際、(X)HTMLタグによって記述していますが、ブラウザはHTMLタグ（マークアップ言語）を一度DOMツリーに構成するらしいです。

この際、ブラウザによっては、改行や改行、タブ、スペースといったものを｢テキストノード｣、つまりテキスト（この場合は空白の半角1文字分）と同等なものと認識してしまうらしいです。この空のテキスト要素を｢ホワイトスペースノード｣と言います。

このあたりは、以下の記事がわかりやすい。

第2回　ブラウザからHTMLはどう見えているかを理解しよう ～ドキュメントツリー～：ITpro

そしてコメントの場合は｢コメントノード｣となり、コメント内であればHTMLコード上改行していても、DOM上では改行がテキストノードと認識されることはありません。あくまで、コメント内ではすべてのものがコメントとして扱われるということですね。

だから、

<ul><!--
--><li><a href="#">MENU1</a></li><!--
--><li><a href="#">MENU2</a></li><!--
--><li><a href="#">MENU3</a></li><!--
--><li><a href="#">MENU4</a></li><!--
--><li><a href="#">MENU5</a></li><!--
--></ul>

という書き方をすると、

UL
	#comment:
	LI
		A href="#"
			#text: MENU1
	#comment:
	LI
		A href="#"
			#text: MENU2
	#comment:
	LI
		A href="#"
			#text: MENU3
	#comment:
	LI
		A href="#"
			#text: MENU4
	#comment:
	LI
		A href="#"
			#text: MENU5
	#comment:

となり、テキストノードは現れません。

一方で、

<ul>
<li><a href="#">MENU1</a></li>
<li><a href="#">MENU2</a></li>
<li><a href="#">MENU3</a></li>
<li><a href="#">MENU4</a></li>
<li><a href="#">MENU5</a></li>
</ul>

と、普段のように記述すると、

UL
	#text:
	LI
		A href="#"
			#text: MENU1
	#text:
	LI
		A href="#"
			#text: MENU2
	#text:
	LI
		A href="#"
			#text: MENU3
	#text:
	LI
		A href="#"
			#text: MENU4
	#text:
	LI
		A href="#"
			#text: MENU5
	#text:

先ほどコメントノードだったところがテキストノードになっています。

要は、ulの直下の子要素がテキストノードにならないような書き方をすれば、謎の空白は表示されないということなのですね。