XSLT转Freemarker后布局间距异常，不改CSS如何解决？

听起来你遇到的是行内元素空白字符渲染的经典问题——不是CSS的锅，是Freemarker生成的HTML里的换行/空格被浏览器解析成了空白间距，而XSLT生成的单行HTML没有这个问题。下面给你几个不用逐个加float的可行方案：

方案1：CSS层面消除空白间距（推荐，无需改模板） #

给父容器设置font-size: 0，让空白字符的尺寸变成0，再给子元素重置回正常的字体大小。这样既不用动模板，也只需要加几行CSS：

.stars.text-center {
  font-size: 0; /* 消除空白字符的渲染空间 */
  text-align: center; /* 保留原有的居中样式 */
}
.stars.text-center i {
  font-size: 16px; /* 替换成你实际需要的图标字体大小 */
}

方案2：用Flex布局替代行内布局 #

给父容器设置display: flex，Flex布局不会解析子元素之间的空白字符，同时可以用justify-content: center实现居中（如果想保留原text-center的效果）：

.stars.text-center {
  display: flex;
  justify-content: center; /* 实现水平居中，替代text-align:center */
}

这个方案也只需要修改父元素的CSS，不用触碰数十个子元素。

方案3：修改Freemarker模板压缩空白输出 #

如果不想改CSS，可以让Freemarker生成和XSLT一样的单行HTML。用Freemarker的<#compress>指令压缩输出的空白字符：

<#compress>
<div class="stars text-center">
  <i class="icon-star active" aria-hidden="true"></i>
  <i class="icon-star active" aria-hidden="true"></i>
  <i class="icon-star active" aria-hidden="true"></i>
  <i class="icon-star active" aria-hidden="true"></i>
  <i class="icon-star" aria-hidden="true"></i>
</div>
</#compress>

这样生成的HTML就会是连续的单行，和XSLT的输出一致，自然不会有额外间距。

为什么会出现这个问题？ #

浏览器对行内元素（比如你的<i>图标）之间的**空白字符（空格、换行、制表符）**会统一渲染成一个空格。XSLT生成的HTML没有这些空白，所以元素紧挨着；而Freemarker生成的代码有换行，每个图标之间的换行就被解析成了可见的间距——这些间距不属于margin/padding/border，所以开发者工具里看不到相关属性的变化。

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