CSS Icone: Impossibile rimuovere padding superiore e inferiore (tipo di carattere eccezionale)

Question

Ecco il mio violino:

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

non riesco a rimuovere la parte superiore e l'imbottitura in basso su entrambi i lati di un'icona impressionante font:

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> 

Ho tentato altezze di riga specifiche e ereditando le altezze di riga. C'è qualcosa di fondamentale qui che chiaramente non sto capendo.

Answer 1

Lo span line-height non è di grande aiuto in quanto l'icona viene aggiunta alla pseudo classe :before sul tag <i />. Questa pseudo classe creerà un elemento un po 'nascosto, se puoi chiamarlo così.

Quindi, se si vuole ignorare il css:

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

Rimozione l'imbottitura dell'icona può essere difficile. Forse se si imposta il span su display: inline-block è possibile utilizzare height, width in combinazione con 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 2

Utilizzare span { line-height: 100%; } in modo da riempire il blocco.

Answer 3

si imposta confini in span, e la linea di ereditare line-altezze in i, questo è il problema.

solo aggiungere bordi a 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