Foros del Web - Ver Mensaje Individual

emprear · #2 (**permalink**) 15/12/2011, 23:13

Ese que tenés es un problema bastante raro, hasta de explicar, nunca encontré una documentación muy precisa al respecto.
Te voy a ejemplificar el problema y la solución (al meno una de las posibles), pero en tu caso de tu código en particular, la solución tendrás que buscarla vos, dado de que tu código involucra otros elementos y es bastante más complejo.

para quelo visualices mejor voy a limitarme a 2 etiquetas, div e img, y como un comentario adicional, pero no menos importante, te aclaro que si usas un doctype xhtm transitional, el inconveniente sencillamente no se produce.

El tema es asi, cuando ponés una imagen dentor de un div, y al div le das ó un color de fondo, o un borde, vas a notar que aparece un pequeño padding en la parte inferior del div. Sin importar cuantos resets le apliques, el padding sigue apareciendo

ejemplo 1 - no se produce el problema

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
*{
padding: 0;
margin: 0;
border: none;
}
div {
padding: 0;
border: solid 1px #000;
}
img.bl {
display: block;
}
</style>
</head>
<body>
<p>El problema, aqui no se produce prque usamos xtml transitional</p>
<div>
<img src="1.jpg" alt="ropes" />
</div>
<p>la solución dándole display: block; a la imagen</p>
<div>
<img src="1.jpg" alt="ropes" class="bl" />
</div>
 
</body>
</html>

Ejemplo 2, con strict, se produce

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
*{
padding: 0;
margin: 0;
border: none;
}
div {
padding: 0;
border: solid 1px #000;
}
img.bl {
display: block;
}
</style>
</head>
<body>
<p>El problema</p>
<div>
<img src="1.jpg" alt="ropes" />
</div>
<p>la solución dándole display: block; a la imagen</p>
<div>
<img src="1.jpg" alt="ropes" class="bl" />
</div>
 
</body>
</html>

con html5, también se produce

Código HTML:

Ver original<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>titulo</title> 
<style type="text/css">
*{
padding: 0;
margin: 0;
border: none;
}
div {
padding: 0;
border: solid 1px #000;
}
img.bl {
display: block;
}
</style>
</head>
<body>
<p>El problema, tembién en html5</p>
<div>
<img src="1.jpg" alt="ropes" />
</div>
<p>la solución dándole display: block; a la imagen</p>
<div>
<img src="1.jpg" alt="ropes" class="bl" />
</div>
 
</body>
</html>

para que no queden dudas atodas les hice un

Código CSS:

Ver original*{
padding: 0;
margin: 0;
border: none;
}

Ahora, en tu caso, pensé que se le podria dar un Doctype Transitional a tu documento, pero aún as el problema aparece,
Como ves, es bastante extraño e imprevisible. Y se dá en Firefox, IE, Chrome, Opera, hasta dónde pude probar

Saludos