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

前端之家收集整理的这篇文章主要介绍了html – CSS图标:无法删除顶部和底部填充(字体很棒)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这是我的小提琴:

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

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

@H_301_6@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:

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

删除图标的填充可能很棘手.也许如果你设置跨度显示:inline-block你可以使用height,width和overflow:hidden.

@H_301_6@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相关文章