Html 如何仅在跨度的图像部分添加边距顶部？

因此，我得到了一个跨度，在文本之前有一个图像，但由于某种原因，图像与顶部对齐。当我去掉跨度中的图像部分，只使用。。在它之前，它工作得很好

目前：

预期结果：

css:

.sapphire成员{ 颜色：0033ff； 背景图像：urlhttp://resources.guild-hosting.net/201604011348/themes/core/images/tag_fx/sparkle_yellow.gif; } .蓝宝石会员：之前{ 内容：urlhttps://puu.sh/D9zBw/ca0f811bca.png; } html:

测验 使用img标记获得所需结果的当前html代码：

所以基本上我想知道，如果不使用img标签，是否有可能获得所需的结果？

垂直对齐可能就是您想要的。您希望避免硬编码量，如垂直居中的边距顶部，因为如果字体大小或其他位置发生变化，该怎么办？我建议：

---

你玩过垂直对齐吗。。它应该实现你想要的

<span class='sapphire-member'>Test</span>

.sapphire-member { 
    color: #0033ff;
    background-image: url(http://resources.guild-hosting.net/201604011348/themes/core/images/tag_fx/sparkle_yellow.gif);
    vertical-align: middle;
}
.sapphire-member:before {
    content: url(https://puu.sh/D9zBw/ca0f811bca.png);
    margin-right: 5px;
    vertical-align: inherit;
}