标题小部件使用HTML元素引发的间距异常问题

嘿，我之前在做组件标题样式的时候也碰到过一模一样的坑！这种情况基本都是HTML解析规则或者组件默认样式搞的鬼，普通空格要么被合并要么被忽略，但有几个靠谱的解决办法：

原因分析 #

当你写类似 <span style="color:red">半红</span>半黑 这样的代码时，浏览器在解析HTML时，span标签和后续文字之间的空格可能会被排版规则合并或忽略；再加上很多文本小部件会自带紧凑的默认CSS样式，就直接导致后半段文字贴到了红色文字后面。

具体解决方案 #

1. 使用非断空格 强制生成间距 #

直接把普通空格替换成HTML的非断空格实体，它不会被浏览器合并或忽略，能稳定生成一个空格：

<!-- 修改后 -->
<h3><span style="color:red">半红</span>&nbsp;半黑</h3>

如果需要更大的间距，可以加多个 ，不过这种方式不够灵活，适合简单场景。

2. 给span标签添加CSS margin控制间距 #

通过给红色文字的span设置margin-right，用CSS精确控制间距大小，这是最推荐的方式，能适配各种排版需求：

<!-- 修改后 -->
<h3><span style="color:red; margin-right: 0.5em">半红</span>半黑</h3>

这里用em作为单位是为了和标题文字大小联动，也可以换成px固定数值，比如margin-right: 4px。

3. 给后半段文字也套span，设置margin-left #

如果需要给后半段文字也加样式，或者想更清晰地控制两边间距，可以给黑色文字也套一个span：

<!-- 修改后 -->
<h3><span style="color:red">半红</span><span style="margin-left: 0.5em">半黑</span></h3>

这种方式的好处是可以分别控制两段文字的样式和间距，扩展性更强。

你可以根据自己的需求选其中一种试试，我当时用的是第二种方法，调整margin值就能完美匹配设计要求啦！

内容的提问来源于stack exchange，提问作者Limpuls