imagenes - quitar espacios en blanco css
Eliminar espacio en blanco debajo de la imagen (9)
Esta pregunta ya tiene una respuesta aquí:
En Firefox solo mis miniaturas de video muestran misteriosos 2-3 píxeles de espacio en blanco entre la parte inferior de mi imagen y su borde (ver más abajo).
He intentado todo lo que puedo pensar en Firebug sin suerte.
¿Cómo puedo eliminar este espacio en blanco?
Como se dijo 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 la pantalla img: bloque; en tu 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>
Encontré esta pregunta y ninguna de las soluciones aquí funcionó para mí. Encontré otra solución que eliminó los huecos debajo de las imágenes en Chrome. Tuve que agregar line-height:0; al selector de img en mi CSS y los huecos debajo de las imágenes desaparecieron.
Loco que este problema persista en los navegadores en 2013.
He configurado un JSFiddle para probar varias soluciones diferentes a este problema. Basado en los criterios [vagos] de
1) Máxima flexibilidad
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.
El 1er, 2do y 3er lugar son una combinación de estas tres soluciones:
1) La solución dada por @Dave Kok y @Hasan Gursoy:
img { vertical-align: top; } /* or bottom */
pros:
- Todos los valores de visualización funcionan tanto en el padre como en el img.
- No hay comportamiento muy extraño; cualquier hermano del img cae donde usted esperaría que lo hicieran.
- Muy eficiente.
contras:
- En el caso [perfectamente válido] tanto del padre como del img que tienen `display: inline`, el valor de esta propiedad puede determinar la posición del padre del img (un poco extraño).
2) Configuración 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 primera solución.
pros:
- Todos los valores de visualización funcionan tanto en el padre como en el img.
- No hay comportamiento muy extraño; cualquier hermano del img cae donde usted esperaría que lo hicieran.
- Soluciona el problema del espacio en blanco en línea para cualquier hermano del img.
- Aunque esto todavía mueve la posición del padre en el caso del padre e img teniendo ambos `display: inline`, al menos ya no puede ver al padre.
contras:
- Código menos eficiente.
- Esto supone un marcado "correcto"; si el img tiene hermanos de nodos de texto, no aparecerán.
3) Configuración line-height: 0 en el elemento padre:
.parent {
line-height: 0;
vertical-align: top;
}
.parent > * {
line-height: 1.15;
vertical-align: top;
}
Al igual que la segunda solución, para que sea completamente flexible, básicamente se convierte en una extensión de la primera.
pros:
- Se comporta como las dos primeras soluciones en todas las combinaciones de pantallas, excepto cuando el padre y el img tienen `display: inline`.
contras:
- Código menos eficiente.
- En el caso de que tanto el padre como el img tengan `display: inline`, tenemos todo tipo de locos. (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.
Puede usar el código a continuación si no desea modificar el modo de bloqueo:
img{vertical-align:text-bottom}
O puedes usar lo siguiente como sugiere Stuart:
img{vertical-align:bottom}
Si desea conservar la imagen como en línea, puede poner vertical-align: top o vertical-align: bottom en ella. Por defecto, está alineado en la línea de base, por lo tanto, los pocos píxeles debajo de ella.
Si no quieres usar el bloque, simplemente encuentra
img { vertical-align: top }
.youtube-thumb la altura de la div .youtube-thumb la altura de la imagen. Eso debería establecer el problema en el navegador Firefox.
.youtube-thumb{ height: 106px }
Estás viendo el espacio para los descendientes (los bits que cuelgan de la parte inferior de ''y'' y ''p'') porque img es un elemento en línea por defecto. Esto elimina la brecha:
.youtube-thumb img { display: block; }
.youtube-thumb img {display:block;} or .youtube-thumb img {float:left;}