html - Browser converts empty span tag to self-closed -

i using <span class="class-name"></span> repeatedly in project. this:

... <span class="class-name"></span> text generated here <span class="class-name"></span> text generated here <span class="class-name"></span> ... 

the purpose of <span>is have padding-right text after displayed nicer. problem chrome browser can not render empty <span> converts this:

<span class="class-name">    text generated here       <span class="class-name">          text generated here             <span class="class-name">             </span>       </span> </span> 

which not result in output looking for. because paddings mixed up. interesting thing if add character ​ between tags, first view rendered browser , problem gone. please explain why working this?

had trouble reproducing bug, code seems produce it

<span class="class-name"/> <p>some text generated here</p> <span class="class-name"/> <p>some text generated here</p> <span class="class-name"/> 

your code works perfetly fine me, sure verbose or did used xhtml tag closing

<span style="color:green"><span style="color:red"/>    if it's red, it's html. green xhtml. </span>