img {
display:block; /* removes extra space */
}Isso não é segredo, mas me deixou perplexo por um longo tempo quando comecei a trabalhar com CSS, e vejo que ele pega os iniciantes o tempo todo.
Ao estilizar uma imagem com um elemento logo abaixo dela, você geralmente obtém um espaço extra pendurado entre o elemento e a imagem.
Nenhuma quantidade de zerar margens e preenchimento irá removê-lo. Mas adicionar display:block;à sua imagem vai! As imagens são inline-blockpor padrão, de modo que o espaço extra é na verdade o navegador deixando espaço para descendentes de texto.
Com a correção aplicada:
Veja em ação neste violino: http://jsfiddle.net/BxTzK/