html - CSS:如何使字体图标和它下面的文字更接近？

Question

我是 CSS 新手。我想实现一个 div ，其中包含一个带有数字的字体图标。定义是:

<div class="col-xs-3" style="text-align: center;">
    <span class="fui-like"></span>
    <p style="font-size: 12px; font-weight: 200;">500</p>
</div>

class 'fui-like' 是获取字体图标的简单定义:

.fui-like:before {
   content: "\e907";
}

结果如下: font icon with text under it

如您所见，字体图标与其下方的文本之间存在一定距离。我想知道有没有什么方法可以让它们更接近？

Answer 1

建议:

也许你可以玩玩 line-height CSS 属性，在 <div> 上或其子女。尝试将其设置为与元素的字体大小相同的值，然后尝试更低或更高的值。 (或者更好，只使用“1”，不带单位，用作字体大小值的乘数；然后尝试更高或更低的值，例如“1.1”或“.9” . 这样，如果您的 font-size 值稍后发生变化，line-height 仍然与您的预期成比例。)

或者检查您的 <p>元素没有添加边距或填充，并尝试将其删除(在本例中为 margin-top 或 padding-top)。

(同样适用于 <span> ，虽然通常它不用作 block 元素，因此它不应该有任何垂直边距或填充。但取决于您的 CSS，情况可能如此。)