Internet Explorer deja un espacio entre imágenes


A veces ASP.NET deja pequeños espacios de uno o dos pixeles entre una imagen y otra, como si se tratara de un “padding-bottom”.  He encontrado que estos espacios en ocasiones se deben a saltos de línea (aunque suene ridículo) que se dejan en el código fuente.

Ejemplo:

ASP:
  1. <tr>
  2.    <td>
  3.       <asp:Image Id="Imagen1" runat="server">
  4.    </td>
  5. </tr>
  6. <tr>
  7.    <td>
  8.       <asp:Image Id="Imagen2" runat="server">
  9.    </td>
  10. </tr>

Si lo anterior deja un espacio entre la imagen 1 y la imagen 2, intenta esto:

ASP:
  1. <tr><td><asp:Image Id="Imagen1" runat="server"></td></tr>
  2. <tr><td><asp:Image Id="Imagen2" runat="server"></td></tr>

Claro que no debería ser, pero al parecer es algún bug de Internet Explorer.

Ahora bien, si lo que quieres es una solución más confiable, utiliza el siguiente estilo en tu hoja de estilos:

CSS:
  1. img { display: block; }

Como por arte de magia, el problema desaparece sin tener que estar eliminando saltos de línea en nuestro código.

Tip obtenido de mattPealing.

  1. #1 by Daniel Martinez on 17 Febrero 2011 - 10:39

    Enorme! Tenía una hora quebrandome la cabeza en ese punto y el CSS que comentas solucionó todo como por arte de magia.

    Muchas gracias! Un saludo!

  2. #2 by Pablo Viale on 17 Febrero 2011 - 10:53

    De nada Daniel, qué bueno que te sirvió. :)

(No será publicado)