Espacio al final de imagenes XHTML

darkmagnus · #1 (**permalink**) 14/01/2011, 10:50

Saludos a todos.

Luego de leer un poco decidí pasar mis paginas a xhtml. Todo iba bien hasta que noté que justo debajo de las imágenes (no se si en otros elementos también pasa) aparece un pequeño espacio en blanco como si tuvieran un padding-bottom.

He intentado todo y me doy cuenta que eso pasa cuando le agrego el atributo xmlns="http://www.w3.org/1999/xhtml" a la etiqueta <html>.

Aquí les dejo la prueba de los que les comento.

Pagina HTML:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
    </head>
    <body>
        <div style="border: 1px solid red;">
            <img src="http://www.faerum.com/images/alt_banner_03.png" alt="">
        </div>
    </body>
</html>

Se ve así [URL="http://www.faerum.com/prueba_html.php"]Prueba HTML[/URL]

Pagina con XHTML:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
        <title></title>
    </head>
    <body>
        <div style="border: 1px solid red;">
            <img src="http://www.faerum.com/images/alt_banner_03.png" alt=""></img>
        </div>
    </body>
</html>

Se ve así [URL="http://www.faerum.com/prueba_xhtml.php"]Prueba XHTML[/URL]

Si alguien me puede ayudar a quitar ese molesto espacio se los agradecería de corazón.

Gracias por su atención.

mayid · #2 (**permalink**) 16/01/2011, 09:25

La idea es que las imagenes se cierren en el mismo tag. En vez de esto:
<img src="http://www.faerum.com/images/alt_banner_03.png" alt=""></img>

Esto:
<img src="http://www.faerum.com/images/alt_banner_03.png" alt="" />

Fijate con un inspector de codigo (como el firebug) si realmente hay un margen. Y si lo hay quizas tengas que resetear tu css (aunque no se si las imagenes tienen margen por defecto).

Saludos!

jalex16 · #3 (**permalink**) 16/01/2011, 14:49

eso puede deberse a que <img> es un elemento inline-block. sólo aplícale un display: block; y desaparecerá ese margen que creo que sólo afecta a IE.

maycolalvarez · #4 (**permalink**) 16/01/2011, 19:06

Cita:

Iniciado por jalex16

eso puede deberse a que <img> es un elemento inline-block. sólo aplícale un display: block; y desaparecerá ese margen que creo que sólo afecta a IE.

si, img es un elemento de línea, pero eso no es un margen, ese espacio se debe al baseline del texto, y no afecta sólo a IE, sino a todos los navegadores en modo strict, respuesta completa: http://www.forosdelweb.com/f53/espac...2/#post3706791

referencia: https://developer.mozilla.org/en/Ima...ysterious_Gaps