CSS 图标：无法删除顶部和底部填充（字体真棒）答案

【问题标题】：CSS Icons: Cannot remove top and bottom padding (font awesome)CSS 图标：无法删除顶部和底部填充（字体真棒）
【发布时间】：2020-11-01 19:00:01
【问题描述】：

这是我的小提琴：

http://jsfiddle.net/schmudde/VeA6B/

我无法删除字体真棒图标两侧的顶部和底部填充：

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>

我尝试了特定的行高并继承了行高。这里有一些基本的东西我显然不明白。

【问题讨论】：

标签： html css font-awesome-3.2

【解决方案1】：

跨度上的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

【讨论】：

太棒了。我找不到很多关于这个特定问题的帖子，这让我发疯。我真的很感激！

【解决方案2】：

使用span { line-height: 100%; }，这样它就可以填满块了。

【讨论】：

【解决方案3】：

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

【讨论】：