Como remover o espaço em branco embaixo de uma imagem dentro de uma div

Como remover o espaço em branco embaixo de uma imagem dentro de uma div

Em alguns navegadores é comum aparecer uma margem extra embaixo de uma imagem. Essa eventualidade acontece por que a imagem é do tipo inline e obedece o valor default da propriedade vertical-align que é baseline.

<div id="box">
    <img src="..." />
</div>

Para solucionar esse problema basta declarar o vertical-align da imagem como bottom, top ou middle:

#box img {
    vertical-align: bottom;
    /* ou */
    vertical-align: top;
    /* ou */
    vertical-align: middle;
}

Outra alternativa é mudar o display da imagem para block:

#box img {
    display: block;
}

Referências