Eliminar espacio en blanco debajo de la imagen [duplicar]

Puede usar el código a continuación si no desea modificar el modo de bloque:

img{vertical-align:text-bottom}

O puedes usar lo siguiente como Stuart sugiere:

img{vertical-align:bottom}

Si desea conservar la imagen en línea, puede poner vertical-align: top o vertical-align: bottom en ella. De forma predeterminada, está alineado en la línea de base, por lo tanto, los pocos píxeles debajo de él.

He configurado un JSFiddle para probar varias soluciones a este problema. Basado en los criterios[vagos] de

1) Flexibilidad máxima

2) No hay comportamiento extraño

La respuesta aceptada aquí de

img { display: block; }

Que es recomendado por mucha gente (como en este excelente artículo), en realidad ocupa el cuarto lugar.

1er, 2do, y 3er lugar son todos un lanzamiento entre estos tres soluciones:

1) La solución dada por @ Dave Kok y @Hasan Gursoy:

img { vertical-align: top; } /* or bottom */

ventajas:

• Todos los valores de visualización funcionan tanto en el padre como en img.
• Ningún comportamiento muy extraño; cualquier hermano del img cae donde esperarías que lo hiciera.
• Muy eficiente.

contras:

• En el caso [perfectamente válido] de que tanto el padre como img tengan ' display: inline`, el valor de esta propiedad puede determinar la posición del padre del img (un poco extraño).

2) Establecer font-size: 0; en el elemento padre:

.parent {
    font-size: 0;
    vertical-align: top;
}
.parent > * {
    font-size: 16px;
    vertical-align: top;
}

Dado que este [tipo de] requiere vertical-align: top en el img, esto es básicamente una extensión de la 1ra solución.

ventajas:

• Todos los valores de visualización funcionan tanto en el padre como en img.
• Ningún comportamiento muy extraño; cualquier hermano del img cae donde esperarías que lo hiciera.
• Corrige el espacio en blanco en línea problema para cualquier hermano del img.
• Aunque esto todavía mueve la posición del padre en el caso de que el padre e img tengan `display: inline`, al menos ya no puedes ver el padre.

contras:

• Código menos eficiente.
• Esto asume el marcado "correcto"; si el img tiene nodos hermanos de texto, no aparecerán.

3) Establecer line-height: 0 en el elemento padre:

.parent {
    line-height: 0;
    vertical-align: top;
}
.parent > * {
    line-height: 1.15;
    vertical-align: top;
}

Similar al 2do. solución en que, para hacerlo completamente flexible, básicamente se convierte en una extensión de la 1a.

ventajas:

• Se comporta como las dos primeras soluciones en todas las combinaciones de pantalla, excepto cuando el padre y el img tienen `display: inline`.

contras:

• Código menos eficiente.
• En el caso de que tanto el padre como img tengan `display: inline`, obtenemos todo tipo de locuras. (Tal vez jugar con la propiedad` line-height ' no es la mejor idea...)

Así que ahí lo tienen. Espero que esto ayude a alguna pobre alma.

Encontré esta pregunta y ninguna de las soluciones aquí funcionó para mí. Encontré otra solución que se deshizo de los huecos debajo de las imágenes en Chrome. Tuve que agregar line-height:0; al selector img en mi CSS y los huecos debajo de las imágenes desaparecieron.

Loco que este problema persiste en los navegadores en 2013.

Tenía este problema, encontró la solución perfecta en otro lugar si no quiere que use bloque solo agregue

img { vertical-align: top }

.youtube-thumb img {display:block;} or .youtube-thumb img {float:left;}

Dar la altura del div .youtube-thumb la altura de la imagen. Eso debería establecer el problema en el navegador Firefox.

.youtube-thumb{ height: 106px }

Como se indicó anteriormente, la imagen se trata como texto, por lo que la parte inferior es para acomodar a aquellos molestos: "p,q,y,g,j"; la solución más fácil es asignar el img display:block; en su css.

Pero esto inhibe el comportamiento estándar de la imagen de fluir con el texto. Para mantener ese comportamiento y eliminar el espacio. Recomiendo envolver la imagen con algo como esto.

<style>
    .imageHolder
    {
        display: inline-block;
    }
    img.noSpace
    {
        display: block;
    }
</style>
<div class="imageHolder"><img src="myimg.png" class="noSpace"/></div>