加入收藏 | 设为首页 | 会员中心 | 我要投稿 财气旺网 - 财气网 (https://www.caiqiwang.com/)- AI开发硬件、专属主机、建站、CDN、云容器引擎!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

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

发布时间:2024-06-09 17:34:49 所属栏目:资源 来源:DaWei
导读: 这是我的小提琴:

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

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

span {

border: 1px solid red;

line-height: 40%;
这是我的小提琴:
 
http://jsfiddle.net/schmudde/VeA6B/
 
我无法删除字体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>
 
我尝试了特定的行高和继承行高.这里有一些基本的东西我显然不理解.
 
解决方法
 
当图标被添加到伪类时,跨度上的行高对您没有多大帮助:在< 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
 
 

(编辑:财气旺网 - 财气网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章