検証：HTMLソースコードでの改行の有無によるブラウザ表示時のズレについて

先日の授業中、HTMLのソースコードで内で改行するかしないかでブラウザ表示時に半角スペース分のズレが生じることを発見。
詳細を探ってみた。

以下、bodyタグ内サンプルコード↓

<form action="#" method="post">

　<!-- 改行あり例 -->
　<p>好きな犬は：<!-- ←改行部 -->
　　<label><input type="checkbox" name="mobile" value="1">パグ</label>
　</p>

　<!-- 改行なし例 -->
　<p>好きな犬は：<label><input type="checkbox" name="mobile" value="1">パグ</label>
　</p>

</form>

上記表示結果↓

※Firefox,Chrome,IE9で確認

原因や対策の詳細は下記で説明されています。
http://www.tagindex.com/kakolog/q2bbs/901/1100.html

上記リンク先で紹介されているコメントアウト利用方法を試してみると…
下記、該当部ソースコード抜粋

<p>好きな犬は：<!--
--><label><input type="checkbox" name="mobile" value="1">パグ</label>
</p>

結果↓

見事解決。あざーす！