una etiqueta que toma algo de espacio extra en html

Question

Puse una imagen dentro de la etiqueta a. pero cuando di borde a la imagen y una etiqueta. La etiqueta A toma un poco de espacio extra. no está rodeando la imagen. Cómo superar esos espacios extra con la etiqueta 'a'. estoy indicando una etiqueta en línea roja.

Mi html:

<a href="#"><img src="http://img165.imageshack.us/img165/1043/burnhr6.png"/></a> 

Css:

img 
{ 
    border:1px solid black; 
} 
a 
{ 
    border:1px solid red; 
} 

http://jsfiddle.net/rEPXY/2/

Answer 1

es algo como esto lo que está buscando?

a 
{ 
    border:1px solid red; display:inline-block; line-height:0; 
} 

Answer 2

Dependiendo de cómo va a ser colocado en su página web esta imagen, puede solucionar este problema mediante flotación de los <a> y <img> etiquetas. Ver jsFiddle revisada para un ejemplo:

HTML:

<a href="#"><img src="http://img165.imageshack.us/img165/1043/burnhr6.png"/></a> 

Css:

img { 
    border:1px solid black; 
    float: left; 
} 

a { 
    border:1px solid red; 
    float: left; 
} 

www.jsfiddle.net/rEPXY/9

Answer 3

Lo que yo no entiendo es por qué tiene un borde en la etiqueta. Supongo que cuando agrega el borde, la etiqueta a es interpretada por el navegador como un elemento con contenido y, por lo tanto, probablemente asigna la altura de línea predeterminada y ajusta el ancho para que se ajuste al contenido dentro de la etiqueta.

Answer 4

Ejemplo vivo: http://jsfiddle.net/rEPXY/18/

imagen es tratada como en línea, por lo que va a adherirse al tamaño de fuente y la línea de alturas, junto con saltos de línea. Cambia la naturaleza de la imagen y su contenedor y deberías estar bien. El CSS por debajo de la etiqueta <a> está utilizando inline-block pero también se puede cambiar a block con un width propiedad

Si usted flota la etiqueta <a> también, su va a ser problemático align con otros elementos.

img 
{ 
    border:1px solid black;float:left; 
} 
a 
{ 
    border:1px solid red;display:inline-block; 
} 

Answer 5

According to this, se puede resolver mediante la adición de la siguiente regla:

a img {vertical-align:bottom} 

que parecía trabajar para mí en su jsFiddle.