JINMUSOFTWARE

文字の前後に空白が発生する【HTML】

文字列前後の空白

開発者ツールでHTML要素を確認したときに文字の前後に空白が発生していることがある。なんだろう?

発生する症状

文字列前後の空白
文字列前後の空白

ブラウザの開発者ツールでこれを確認できる。

原因

原因は、改行です

<div>ABCDEF</div>
<div>
    ABCDEF
</div>

考察まとめ

連続したspan要素間の改行やimg要素後の改行でも発生する。

改行は空白を発生させると覚えておこうかな。

関連記事

spanタグとspanタグの間に隙間ができる問題

IMGタグの隙間問題