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

在css.

中调整行高属性可以使字体图标和文字靠得更近

Answer 2

给出你的 p 标签 margin:0。

喜欢：

p{
  margin:0;
}

Working Fiddle

Answer 3

建议：

也许您可以在 <div> 或其子项上玩 line-height CSS 属性。尝试将其设置为与元素的字体大小相同的值，然后尝试更低或更高的值。（或者更好，简单地使用“1”，没有单位，作为字体大小值的乘数；然后尝试更高或更低的值，例如“1.1”或“ .9"。这样，如果您的字体大小值稍后发生变化，行高仍会与您的预期成比例。）

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

（<span> 也是如此，虽然通常它不用作块元素，因此它不应该有任何垂直边距或填充。但是取决于你的 CSS 这可能是例。)

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

CSS: how to make the font icon and text under it closer?

html

css

fonts

font-face