HTML5 y CSS: Quitando el misterioso margen inferior de una imagen

Tamaño de letra:

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:

Homer Simpson con margen inferior

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:

Homer Simpson con margen inferior
Última actualización: Lunes, 06 Enero 2014
Comentarios  
+1 # Emi 24-05-2022 04:51
Gracias!!! Llevaba dias luchando con esto!!!
Responder | Responder con una citación | Citar
0 # Salvador Lozano 31-03-2020 03:33
Lo mismo, llevo mucho rato tratando de eliminar ese pinche espacio. Mil gracias.
Responder | Responder con una citación | Citar
0 # Percy 12-05-2018 01:02
Cerca de 4 horas probando mil maneras.... eres un genio, gracias
Responder | Responder con una citación | Citar
+1 # Johni 17-03-2018 06:35
me acabas de salvar de 8 horas mas sin dormir crack
Responder | Responder con una citación | Citar
+2 # Danilo 19-07-2017 01:09
me estaba volviendo loco :o y tuve que revisar como 200 lineas de CSS
Responder | Responder con una citación | Citar
+1 # Bruno 16-04-2017 20:45
Excelente tu aportación compañero, estaba hecho un lío por ese pequeño espacio :D
Responder | Responder con una citación | Citar
+3 # Luis Zambrano 18-02-2016 19:01
Me parecio muy bueno el tuto,lo mejor esque si pude resolver un errorsito que tenia jejeje :P
Por cierto buen foro.
Responder | Responder con una citación | Citar
Escribir un comentario
Antes de publicar un comentario, usted debe aceptar nuestras condiciones de uso: Condiciones de uso. Debido al spam, todos los comentarios serán moderados. Normalmente se responde en unos minutos, refresca los comentarios para comprobarlo.



 
Visitas: 8503159