3 modi per rimuovere lo spazio sotto alle immagini con i CSS

Per impostazione predefinita le immagini sul web sono rappresentate o meglio dire posizionate sulla stessa line come se fossero lettere. Pertanto la base dell'immagine poggerà alla stessa altezza su cui poggiano lettere ascendenti come la a, la d, la s, ecc... tuttavia per garantire lo stesso ingombro occupato dalle lettere discendenti quali ad esempio la j, la g, ecc... viene assegnato all'immagine stessa uno spazio vuoto il quale può risultare antiestetico qualora si lavorasse, per dirne una, con un mosaico di immagini.
Il problema in questione è evidenziato dall'immagine seguente (Fig. 1):

Fig. 1 - CSS - Rimuovere spazio sotto alle immagini

Per ovviare a questa situazione con i CSS è possibile agire in 3 modi:

1) Assegnare una dichiarazione line-height al contenitore dell'immagine:

.contenitore {line-height: 0;}

2) Assegnare la dichiarazione display:block all'immagine:

.contenitore img {display: block;}

3) Modificare il vertical-align per posizionare l'immagine ad un'altra altezza:

.contenitore img {vertical-align: bottom;}

Un esempio con cui potete testare direttamente il risultato è presente sul seguente JSFiddle, in anteprima incorporato di seguito: