css - quitar - HTML 5 extraño img siempre agrega 3px margen en la parte inferior
margenes en html5 (10)
A menudo resuelvo esto dando la display:block elemento de imagen display:block o display:inline-block según corresponda.
Cuando cambio mi sitio web a
<!DOCTYPE HTML>
Cada elemento img que está envuelto dentro de un DIV tiene un margen inferior de 3px, aunque ese margen no está definido en CSS. En otras palabras, no hay atributos de estilo que estén causando ese margen inferior de 3px.
<div class="placeholder">
<img alt="" src="/haha.jpg" />
</div>
Ahora digamos que haha.jpg es 50x50, y .placeholder está configurado para mostrar: table. Extrañamente, las dimensiones de altura de .placeholder en mi observación son 50x53 ...
¿Alguien ha encontrado esta anomalía antes y la ha solucionado?
EDITAR
Aquí está la JS FIDDLE
Creo que estoy poniendo
line-height: 1;
en la imagen también solucionará este problema, especialmente si está en un bloque en sí mismo.
Este problema se debe a que la imagen se comporta como un carácter de texto (y deja un espacio debajo de donde iría la parte colgante de una "y" o "g"), y se resuelve mediante el uso de la propiedad CSS de vertical-align para indican que no se necesita ese espacio. Casi cualquier valor de vertical-align servirá; Me gusta el middle , personalmente.
img {
vertical-align: middle;
}
jsFiddle: http://jsfiddle.net/fRpK6/1/
No estoy seguro de la explicación exacta de por qué sucede, pero proporcione su marcador de posición Div font-size: 0px;
.placeholder {
font-size: 0px;
}
Para mí fue una combinación de
font-size: 0px;
line-height: 0;
en el contenedor de envoltura que lo arregló.
También ocurre con los divs acumulados, solo agrega la propiedad float . Ejemplo:
<body>
<div class="piledUpDiv">Some text</div>
<div class="piledUpDiv">Some text</div>
<div class="piledUpDiv">Some text</div>
</body>
CSS problemático:
.piledUpDiv{
width:100%;
display:inline-block;
}
Solución:
.piledUpDiv{
width:100%;
display:inline-block;
float:left;
}
aplicar display: block a la imagen corregirlo, tengo este problema con imágenes dentro de divs flotantes.
está resuelto mi problema
line-height: 0;
no estoy seguro de cuál es el problema exacto, pero lo he intentado con 2 opciones diferentes, primero aplicar clase en la etiqueta img; esto funcionará y, segundo, aplicar tamaño de fuente 0 px;
tal vez es el problema del espacio en blanco lo que causa esto. entonces, los métodos abajo quizás sean útiles
img {
display: block;
} o
img {
vertical-align: top/middle/...;
}
o
.placeholder {
font-size: 0;
}