Geek Answers Handbook

CSS Icons: Cannot remove top and bottom padding (excellent font)

Here is my fiddle:

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

I can’t remove the top and bottom padding on both sides of the font. Icon:

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 tried to specify the line height and inherit the line height. There is something fundamental here, I clearly do not understand.

+6
source share
3 answers

line-height on the span will not help you, because the icon is added to the :before pseudo- :before in the <i /> . This pseudo-class will create a somewhat hidden element, if you can call it.

So, if you want to override css:

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

Removing the gasket icon can be difficult. Perhaps if you set the span to display: inline-block , you can use height , width in combination with 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

+4
source

Use span { line-height: 100%; } span { line-height: 100%; } so that it fills the block.

+2
source

You set the boundaries in the span and the line inheriting the height of the line in i , which is the problem.

just add borders to i :

 span { line-height: 40%; } i { border: 1px solid red; 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>

Fiddle

0
source

More articles:


All Articles