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

发布时间：2024-06-09 17:39:56 所属栏目：资源来源：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;

}



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

解决方法

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

所以如果你想覆盖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

（编辑：淮北站长网）

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