どうも7noteです。よく見ると半角スペースみたいなのが入ってる現象を解説

私自身悩んだりつまったりしたことがあったので、参考になれば嬉しいです。

結論：インライン要素とインライン要素の間に改行を入れてはいけない

HTMLを記述する際、このような書き方はNGです。

<div>
    <span>あいう</span>
    <span>えお</span>
</div>

--結果--
あいう えお

問題点として、エディタでインライン要素とインライン要素の間に改行を入れてしまうと実行結果側で半角分の余白ができてしまいます。
※inline-blockでも同じ。

対策方法

改行を入れない

<div>
    <span>あいう</span><span>えお</span>
</div>

改行している範囲をコメントアウトする

<div>
    <span>あいう</span><!--
    --><span>えお</span>
</div>

閉じタグの位置を変える（汚くなるのでオススメしません）

<div>
    <span>あいう</span
    ><span>えお</span>
</div>

まとめ

調べたところcssを使って開いた余白を詰める方法などもありましたが、私はあまりオススメしません。予期せぬ箇所へのcssの影響が出るかもしれないので。
今回紹介した書き方であれば、HTMLを綺麗に書くことを意識するだけでいいですし、他の人がソースを見たときにも見やすいのでオススメです。

おそまつ！