Browser converts empty span tag to self-closed

Question

I am using <span class="class-name"></span> repeatedly in my project. Something like this:

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

The purpose of the <span>is to have a padding-right so the text after it will be displayed nicer. The problem is Chrome Browser can not render the empty <span> so it converts it to something like this:

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

Which this will not result in the output I am looking for. Because the paddings will be mixed up. The interesting thing is if you add a character like between the tags, the first view will be rendered by the browser and the problem is gone. Could anyone please explain why its working like this?

I can't reproduce the problem: http://i.imgur.com/epR3pVB.png — Quentin, Jul 25 '17 at 10:53
`
` elements trigger new lines by default anyway, so there wouldn't be any text to the right of the ``. — Quentin, Jul 25 '17 at 10:54
Actually its not exactly a
. The process is more complecated than this. The code is written in .xml files and then its converted to html and some text is generated in the span. — Hodaut96, Jul 25 '17 at 10:55
Whatever the problem is, you removed it when you removed the complexity. You need to provide a real [mcve] — Quentin, Jul 25 '17 at 10:57
Don't add a link. Put the code needed to reproduce the problem *in the question itself*. [SO supports live demos](https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/). — Quentin, Jul 25 '17 at 11:00
"The code is written in .xml files and then its converted to html". Your problem is probably in that step, rather than when Chrome receives the resulting HTML. — Alohci, Jul 25 '17 at 11:30
It seems that cocoon it doing the translation to self-closing tags and then the browser converts the self-closing tags as the second view. — Hodaut96, Jul 25 '17 at 13:08

score 0 · Answer 1 · answered Jul 25 '17 at 11:08

had some trouble reproducing the bug, but that code seems to 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 however works perfetly fine for me, are you sure you are as verbose or did you used the xhtml tag closing

<span style="color:green"><span style="color:red"/> 
  If it's red, it's HTML. Green is XHTML.
</span>

Browser converts empty span tag to self-closed

1 Answers1