Esta pregunta ya tiene una respuesta aquí:

Espacio en blanco en la parte inferior de la etiqueta de anclaje 2 respuestasEliminar espacio en blanco debajo de la imagen [duplicar] 9 respuestas

Tengo el siguiente código y permite que el rojo se muestre desde el elemento a. Por qué es esto. Hubiera esperado que el elemento a solo se expandiera al tamaño de los contenidos, pero parece que es un poco más grande que eso. Vea el codepen aquíhttp://codepen.io/anon/pen/soqEz.

HTML

<a href="#"><img src="http://placehold.it/150x150" /></a>

CSS

a{
  background: red;
  margin-bottom:0;
  padding-bottom:0;
  border-bottom:0;
}
img {
  margin-bottom:0;
  padding-bottom:0;
  border-bottom:0;
}

EDITAR: veo las respuestas a continuación ... pero puede alguien también explicarpor qué el espacio está ahí EN TODO (quiero decir, dado que es un elemento de nivel de bloque ... cuál es el propósito de esto en primer lugar) ... en lugar de tratar de deshacerse de él. Gracias