CSS圖標：無法刪除頂部和底部填充（字體真棒）

我不能刪除字體真棒圖標兩側的頂部和底部填充：

span { 
    border: 1px solid red; 
    line-height: 40%; 
} 
i { 
    border: 1px solid green; 
    padding: 0px; 
    margin: 0px; 
    display: inline-block; 
    width: auto; 
    height: auto; 
    line-height: inherit; 
    vertical-align: baseline; 
    background-color: red; 
} 

<span><i class="icon-check icon-3x"></i></span>

我已經嘗試過特定的行高並繼承行高。這裏有一些基本的東西，我顯然不理解。

來源

2014-04-17 schmüdde

跨度上的line-height對您不會有多大幫助，因爲該圖標已添加到<i />標記上的僞類:before。這個僞類將創建一個隱藏的元素，如果你可以稱之爲的話。

所以，如果你想覆蓋的CSS：

.icon-check:before { font-size: 2rem; }

刪除圖標的填充可能會非常棘手。也許如果您將span設置爲display: inline-block，則可以使用height,width與overflow: hidden的組合。

span { 
    border: 1px solid #FF0000; 
    display: inline-block; 
    height: 38px; 
    overflow: hidden; 
    position: relative; 
    width: 45px; 
} 
i.icon-check:before { 
    left: 0; 
    position: absolute; 
    top: -4px; 
}

DEMO

來源

2014-04-17 01:19:20

輝煌。我無法在這個特定問題上找到很多帖子，這讓我發瘋。對此，我真的非常感激！ –

使用span { line-height: 100%; }所以它會填滿塊。

來源

2014-04-17 01:08:31 punund

您在span設置邊框，線條繼承線高度在i，這就是問題所在。

只是添加邊框i：

span { 
    line-height: 40%; 
    } 
i { 
    border: 1px solid red; 
    border: 1px solid green; 
    padding: 0px; 
    margin: 0px; 
    display: inline-block; 
    width: auto; 
    height: auto; 
    line-height: inherit; 
    vertical-align: baseline; 
    background-color: red; 
    } 

    <span><i class="icon-check icon-3x"></i></span>

Fiddle

來源

2014-04-17 01:32:59

CSS圖標：無法刪除頂部和底部填充（字體真棒）

回答

相關問題