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 {
    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 have attempted specific line-heights and inheriting line-heights. There is something fundamental here I am clearly not understanding.

Answer 1

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

Answer 2

The line-height on the span won't help you much as the icon is added to the pseudo class :before on the <i /> tag. This pseudo class will create a somewhat hidden element, if you can call it that.

So if you want to override the css:

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

Removing the padding of the icon can be tricky. Maybe 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

Answer 3

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;
   }

   <span><i class="icon-check icon-3x"></i></span>

Fiddle