title: CSS Icons: Cannot remove top and bottom padding (font awesome)
body: <p>Here is my fiddle:</p>
  
  <p><a href="http://jsfiddle.net/schmudde/VeA6B/" rel="noreferrer">http://jsfiddle.net/schmudde/VeA6B/</a></p>
  
  <p>I cannot remove the top and bottom padding on either side of a font awesome icon:</p>
  
  <pre><code>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;
  }
  
  &lt;span&gt;&lt;i class="icon-check icon-3x"&gt;&lt;/i&gt;&lt;/span&gt;
  </code></pre>
  
  <p>I have attempted specific line-heights and inheriting line-heights. There is something fundamental here I am clearly not understanding.</p>