CSS Icons: Kann nicht oben und unten Polsterung (Schrift super) entfernen

Question

Hier ist meine Geige:

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

Ich kann die obere und untere Polsterung auf beiden Seiten einer Schriftart ehrfürchtigen Symbols entfernen:

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> 

Ich habe versucht, bestimmte Zeilenhöhen und erben Zeilenhöhen. Es gibt etwas Grundlegendes, das ich hier offensichtlich nicht verstehe.

Answer 1

Die line-height auf der Spannweite wird Ihnen nicht viel helfen, wie das Symbol der Pseudo-Klasse :before auf dem <i /> Tag hinzugefügt wird. Diese Pseudoklasse wird ein etwas verstecktes Element erzeugen, wenn Sie es so nennen können.

So möchten, wenn Sie die CSS außer Kraft zu setzen:

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

die Polsterung des Symbols Entfernen kann tückisch sein. Vielleicht, wenn Sie die span auf display: inline-block setzen, können Sie height, width in Kombination mit overflow: hidden verwenden.

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 2

Verwenden Sie span { line-height: 100%; }, damit es den Block füllen würde.

Answer 3

Sie setzen Grenzen in span und line-Höhen in i vererben, das ist das Problem.

nur hinzufügen, Grenzen zu 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