Al fondo del div viene aggiunto un po' di spazio

[tampertools]

Sto cercando di centrare un'immagine all'interno di un div, ma al fondo mi rimangono due o tre pixel di troppo... Ecco un esempio: https://jsfiddle.net/ukbwgbnr/1/embe...sult,html,css/

Guardando con gli strumenti di Chrome, quello spazio non è creato da margini, padding o bordi. Semplicemente l'immagine non ci arriva.

So che è poco spazio, ma si vede perché l'immagine sarà più o meno a 60px. (Stringete la finestra per vedrlo più piccolo nell'esempio)

[KillerWorm]

I pixel in più potrebbero dipendere dal valore dell'interlinea, infatti di default img è un elemento inline. Questo significa che è influenzato dal normale flusso degli elementi come se fosse un testo, e da altre caratteristiche relative proprio al testo.

Assegnando line-height:0; al div contenitore, si dovrebbe risolvere, ma una soluzione più adeguata è quella di convertire semplicemente l'elemento img in un elemento di tipo block.

.profile-picture > .picture {
   display: block;
}

[tampertools]

Beh, grazie