Programación Web Creación páginas Web HTML5 y CSS: Quitando el misterioso margen inferior de una imagenHTML5 y CSS: Quitando el misterioso margen inferior de una imagen
4 píxeles debajo de la imagen. 3 formas.
Una de las cosas un tanto curiosas cuando estás diseñando una web o simplemente escribiendo un artículo al cual le has añadido una imagen, es que la imagen puede quedar con un margen inferior no esperado y esto ocurre en "todos" los navegadores, incluso en IE6. Para reproducir el inconveniente, te voy a poner un sencillo ejemplo de una foto que me acabo de hacer ganando la lotería. El código completo que voy a usar es el siguiente:
<!DOCTYPE html>
<html>
<head>
<title>Misterioso margen inferior</title>
<style>
.contenedor{
background-color: #939393;
}
</style>
</head>
<body>
<div class="contenedor">
<img src="/mifoto.png">
</div>
</body>
</html>
Y el resultado real (significa que pongo el código HTML y CSS, no es solo una imagen) es el siguiente:
Como puedes observar (en algunos navegadores), en la parte inferior de la imagen, existe un pequeño margen misterioso (de color gris y de 4 píxeles) que se observa en todos los navegadores (o casi todos). ¿Por qué ocurre esto? ¿Cómo solucionarlo?
3 formas para quitar el margen
En mis pruebas, ese margen aparece principalmente al declarar el DOCTYPE de un documento como HTML5:
<!DOCTYPE html>
El mismo no aparece, por ejemplo, si declaras el documento como HTML 4.01 Transicional. Este margen es mostrado porque las imágenes son elementos en línea (inline), no son elementos de bloque (block) como en este caso el div. El <div>, como elemento de bloque, ocupa todo el espacio disponible hasta el final. Aquí te muestro 3 formas de solucionar el problema:
1ª forma:
Añadir al estilo de la imagen esto:
display:block;
2ª forma:
Otra opción es añadir al estilo de la imagen lo siguiente:
vertical-align: bottom;
3ª forma:
Una última manera más, es añadir al estilo del div este código:
line-height: 0;
Comprobando el código final
El sencillo código final, testeando la 1ª forma, es el siguiente:
<!DOCTYPE html>
<html>
<head>
<title>Misterioso margen inferior</title>
<style>
.contenedor{
background-color: #939393;
}
</style>
</head>
<body>
<div class="contenedor">
<img style="display:block;" src="/mifoto.png">
</div>
</body>
</html>
Observa el resultado final:
Por cierto buen foro.