[SOLUCIONADO] Ajustar el Alto de DIV a una imagen

Bier · #1 (**permalink**) 17/04/2016, 10:26

Tengo un DIV y dentro una imagen de 21px de alto.
Deseo mostrar la imagen, pero en la parte inferior del DIV me deja un espacio.

¿Cómo puedo hacer para que el DIV se muestre solo con el alto de la imagen sin ese pequeño espacio abajo?

No deseo asignar al DIV la instrucción: height: 21px; ya que es una imagen que cambia dinámicamente y no siempre tiene el mismo alto.

Este es mi html completo:

Código HTML:

Ver original<!doctype html>
<html lang="es">
<head>
<title>Título</title>
<style>
*{
    border:0;
    margin:0;
    padding:0;
}
body{
    background:#8b8b8b;
}
#container {
    background:#fff;
    width:900px;
    margin: auto;
}
#top {
/*  height: 21px; */
}
</style>
</head>
<body>
<section id="container">
    <section id="top"><img src="https://www.microsoft.com/library/errorpages/Images/Microsoft_logo.png" alt=""/>
    </section>
</section>
</body>
</html>

pzin · #2 (**permalink**) 17/04/2016, 10:59

Lo más rápido es que la imagen sea un elemento de bloque:

Código CSS:

Ver originalimg {
  display: block;
}

Otra solución sería poner el tamaño de la fuente del contenedor a cero:

Código CSS:

Ver original#container {
  font-size: 0;
}

Muevo esto al foro de CSS.

Bier · #3 (**permalink**) 17/04/2016, 15:22

Estimado pzin: Muchas Gracias... Funcionó a la perfección.