relleno extra bajo una etiqueta <img>?

Question

Obtengo algún tipo de relleno debajo de una etiqueta img en mi página web. El HTML se parece a:

<li> 
    <div>Title</div> 
    <img src='...' width='60px' height='60px' /> 
</li> 

Sí por lo que es de unos 5 píxeles de desplazamiento debajo de la imagen (te puedo decir porque el color BG del elemento li padre es diferente). Intenté asignar una clase a la etiqueta img con relleno/margen/borde, todo ajustado a cero, pero sin cambios. Me pregunto si hay algo que me falta sobre las etiquetas img que podrían estar causando que aparezca este relleno.

Cuando quito la etiqueta img, y acaba de salir de la div 'título', el relleno adicional se ha ido,

Gracias

------------- - Actualización ------------------

Esto solo ocurre en FF, Chrome y Safari se ven bien. Firebug también muestra que el relleno es parte del elemento img.

Answer 1

¿Qué ocurre si fuerza el margen de relleno y el borde a 0 en los elementos img? ¿Estás trabajando con Firebug?

Answer 2

Creo que podría estar viendo el espacio después de su imagen antes del final del elemento de la lista. Trate de deshacerse de los espacios en blanco en su html, así:

<li><div>Title</div><img src='...' width='60px' height='60px' /></li> 

Answer 3

Usted puede proporcionar un vínculo o más código para permitir una mejor resolución de su problema, pero:

1. Verificar si su imagen se 60px por 60px como configuración en su etiqueta img

2. Quitar relleno y el margen y el borde de su img, es posible que tenga una configuración por defecto para la etiqueta img que causa lo que estás arbitrando

3. El espacio extra debajo de la img puede provenir de otros elementos en la página, lo que significa que con el img en su lugar, algunas fuerzas de elementos que el espacio

Answer 4

extra si se puede establecer el estilo de la imagen display a block que debería resolver el problema. Configuración vertical-align a bottom o middle también debería funcionar. Creo que el problema se debe a que Firefox intenta colocar imágenes en línea para que su borde inferior esté alineado con la línea de base del texto, por lo que hay espacio debajo de la imagen para los descensores de texto.

Answer 5

Simplemente agregue atributo de altura a la imagen en la etiqueta de estilo, por ejemplo, si necesita una línea delgada, entonces 1px debe especificarse externamente para safari.