3px di altezza in più su un div con un'immagine al suo interno

Question

Sto lavorando a un nuovo sito ma c'è un piccolo oggetto di design che non riesco proprio a capire.

Fondamentalmente, sto creando un sito su cui gli utenti possono caricare immagini divertenti. Anche se l'area in cui è esposta l'immagine presenta un gap di 3px sotto. Ecco un link a uno screenshot di cosa intendo, collegamento morto.

Ho provato un sacco di cose ma niente sembra funzionare. Se qualcuno può suggerire qualsiasi soluzione, per favore fallo.

Grazie.

Answer 1

È dovuto al valore predefinito delle immagini vertical-align. Sono baseline. Passare a top o bottom e andrà via.

img{ 
    vertical-align: top; 
} 

Lo spazio aggiuntivo è l'area al di sotto della linea di base, che è per le lettere che pendono al di sotto come y o g.