html - 浏览器将空跨度标签转换为自封闭

Question

我<span class="class-name"></span>在我的项目中反复使用。像这样的东西：

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

的目的<span>是为了padding-right让后面的文本显示得更好。问题是 Chrome 浏览器无法呈现空白<span>，因此它将其转换为如下内容：

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

这不会导致我正在寻找的输出。因为填充物会混淆。有趣的是，如果你在标签之间添加一个类似的字符，第一个视图将被浏览器渲染，问题就消失了。谁能解释一下为什么它会这样工作？

Answer 1

重现错误时遇到了一些麻烦，但该代码似乎产生了它

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

但是你的代码对我来说非常好，你确定你是冗长的还是你使用了xhtml 标记关闭

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