空白による隙間の対処方法

意図せず、HTMLソース中の空白文字、改行が表示されてしまっているために、隙間が空いてしまう場合の対処方法

要素の間にある空白をなくす

code:html

</div>

↓

正攻法

これが本質的な修正になる。

自動生成であればこれが最良。

ソースの視認性が非常に悪くなる。

空白の代わりにコメントをはさむ

code:html

<div class="container"><!--

--><div>x</div><!--

--><div>y</div><!--

--></div>

正攻法

ソースの視認性がやや悪くなる。

手動で作る場合はこれが最良。

終了タグをなくす

code:html

</div>

↓

<div>x

<div>y

</div>

ブラウザは次の開始タグまでをコンテンツとして認識するため。

ソースの視認性が非常に悪くなる。

HTML5 としては正当だが、XML としては違反となる。

フォントのサイズを0にする

コンテナに font-size: 0; を適用する。

つまり、空白文字のサイズを実質的に0にする。

ただし、コンテナの直下に文字がないこと、コンテンツの方でフォントサイズを元に戻す事が必要。

コンテナのフォントサイズが分からなくなるため、コンテンツの方で相対的なフォントサイズ指定をすることができない。

ソースの視認性は良い

場当たり対策

空白の長さをマイナスにする

コンテナに letter-spacing: -0.5em を適用する。

コンテンツの方で letter-spacing: normal; に戻すことが必要。

明らかな場当たり解決。幅に根拠無し。

採用すべきではない。