CSS：如何使字體圖標和文字更接近它？

我是新來的CSS。我想實現一個div，其中包括一個帶有數字的字體圖標。該定義是：CSS：如何使字體圖標和文字更接近它？

<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>

類的FUI樣'是一個簡單的定義，以獲取字體圖標：

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

結果如下： font icon with text under it

正如你所看到的，字體圖標和它下面的文本之間有一段距離。我想知道是否有任何方法讓它們更接近？

來源

2016-02-22 ahwyX100

這是很難要回答，因爲字體本身可能有內置的間距/邊距 - 你可以做一個小提琴嗎？ –

請提供一個jsfiddle。 – vivek

建議：

也許你可以用line-height CSS屬性發揮，無論是在<div>或其子女。嘗試將其設置爲與元素的字體大小相同的值，然後嘗試更低或更高的值。（或更好，使用簡單的「1」，沒有單位，它作爲font-size值的乘數;然後嘗試更高或更低的值，例如「1.1」或「.9」。字體大小值稍後更改，行高保持與您的預期成正比。）

或者檢查您的<p>元素是否沒有添加邊距或填充，並嘗試刪除它（在這種情況下，它會是margin-top或padding-top）。

（規則同樣適用於<span>，但通常它不是作爲一個塊級元素，因此不應該有任何的垂直邊距或填充，但根據您的CSS，可能是這種情況）。

來源

2016-02-22 10:01:26 s427

感謝您的善意幫助，它解決了我的問題。 – ahwyX100

通過調整css中的line-height屬性，可以使字體圖標和文字更加接近。

來源

2016-02-22 09:56:20 vivek

給你的p標籤margin:0。

喜歡：

p{ 
    margin:0; 
}

Working Fiddle

來源

2016-02-22 10:00:23 ketan

CSS：如何使字體圖標和文字更接近它？

回答

相關問題