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> 

Comments

Popular posts from this blog

networking - Vagrant-provisioned VirtualBox VM is not reachable from Ubuntu host -

c# - ASP.NET Core - There is already an object named 'AspNetRoles' in the database -

ruby on rails - ArgumentError: Missing host to link to! Please provide the :host parameter, set default_url_options[:host], or set :only_path to true -