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

概述这是我的小提琴： http://jsfiddle.net/schmudde/VeA6B/ 我无法删除字体awesome图标两侧的顶部和底部填充： span { border: 1px solid red; line-height: 40%;}i { border: 1px solid green; padding: 0px; margin: 0px; 这是我的小提琴：

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 ></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

总结

以上是内存溢出为你收集整理的html – CSS图标：无法删除顶部和底部填充(字体很棒)全部内容，希望文章能够帮你解决html – CSS图标：无法删除顶部和底部填充(字体很棒)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。