Css 添加字母间距时，50%是内容的一半以上

我有一个显示五颗星的代码：

@import'https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css';
.得分{
显示：内联块；
字体：普通20px/1字体；
文本呈现：自动；
-webkit字体平滑：抗锯齿；
文字装饰：无；
颜色：#DCDC；
位置：相对位置；
字母间距：10px；
}
.得分{
边框：1px实心#000；
}
.分数：：之前，
.得分跨度：：之前{
内容：“\f005\f005\f005\f005\f005\f005”；
显示：块；
}
.成绩跨度{
颜色：#FFD700；
位置：绝对位置；
排名：0；
左：0；
溢出：隐藏；
}

---

这是因为

字母间距

在最后一个字母后添加空格：

这是一个很好的例子。你做得很好。当浏览器修复其实现以匹配规范时，您的代码将按预期工作

您可以尝试消除该bug，但当浏览器实现正确的行为时，它可能会崩溃。因此，我建议避免使用

字母间距
。您可以尝试以下方法：


@import'https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css';
.得分{
显示：内联块；
字体：普通20px/1字体；
文本呈现：自动；
-webkit字体平滑：抗锯齿；
文字装饰：无；
颜色：#DCDC；
位置：相对位置；
}
.得分{
边框：1px实心#000；
}
.分数：：之前，
.得分跨度：：之前{
内容：“\f005\f005\f005\f005\f005\f005”；
显示：块；
宽度：7em；
文本对齐：对齐；
文本最后对齐：对齐；
}
.成绩跨度{
颜色：#FFD700；
位置：绝对位置；
排名：0；
左：0；
溢出：隐藏；
}
删除字母间距，并在每个星星之间添加一个空格，如下所示：


您可以按如下方式给出宽度


对于0.5->宽度：计算（10%-5px）
对于1.0->宽度：计算（20%-5px）
对于1.5->宽度：计算（30%-5px）
对于2.0->宽度：计算（40%-5px）
对于2.5->宽度：计算（50%-5px）
对于3.0->宽度：计算（60%-5px）
对于3.5->宽度：计算（70%-5px）
对于4.0->宽度：计算（80%-5px）
对于4.5->宽度：计算（90%-5px）
对于5.0->宽度：计算（100%-5px）

或者也可以为跨度添加以下css

.score span{
  box-sizing: border-box;
  border-right: 5px solid transparent;
}

你的问题很难理解，所以我做了一个大编辑。如果我没有正确理解您的问题，请随意更改。谢谢。我的英语不好：）可能重复@Koda你可以尝试负边距或类似的东西，但当浏览器实现正确的行为时，这会中断。我建议避免使用
字母间距
。也许你可以用理由来代替。
.score span{
  box-sizing: border-box;
  border-right: 5px solid transparent;
}