上一篇: html – >中的链接不会覆盖整... 下一篇:html – 3列：一列有最大宽度,另...

html – CSS图标：无法删除顶部和底部填充(字体很棒)

HTML 发布时间：2022-04-14 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了html – CSS图标：无法删除顶部和底部填充(字体很棒)，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

这是我的小提琴：

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

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>

我尝试了特定的行高和继承行高.这里有一些基本的东西我显然不理解.

@H_262_11@解决方法

当图标被添加到伪类时,跨度上的行高对您没有多大帮助：在< i />之前标签.这个伪类会创建一个隐藏的元素,如果你可以调用它.

所以如果你想覆盖css：

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

删除图标的填充可能很棘手.也许如果你设置跨度显示：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