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

Question

Here is my fiddle:

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

I cannot remove the top and bottom padding on either side of a font awesome icon:

span         


        

Answer 1

You set borders in span, and line inheriting line-heights in i, that's 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;
   }

   

Fiddle