Aquí está mi html:no deseado padding-bottom de un div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<div style="border:1px solid red; float:left; padding:0;">
<img src="xxx.jpg">
</div>
No sé por qué el div contiene algo de relleno de fondo incluso establecer el relleno: 0.
Si elimino DOCTYPE, este problema no ocurrirá. ¿Hay alguna otra forma de resolver este problema sin eliminar DOCTYPE?
img { display:block; }
o
img { vertical-align:bottom; }
funcionaría. Dado que las imágenes están en línea y el texto está en línea, los agentes de usuario dejan algo de espacio para los caracteres descendentes (y, q, g). Para deshacer este efecto para las imágenes, puede especificar cualquiera de los estilos anteriores, aunque es posible que desee que las reglas sean más específicas para que no se oriente a una imagen en la que no desea que se aplique.
Demostración: http://jsbin.com/obuxu
Otra alternativa como otro cartel ha señalado sería establecer line-height a 0 en el elemento padre.
Explicación técnica: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
Si su problema está en IE, esta respuesta parece ser la más lógica. – Sam152
Esto * no * es específico de IE, es el comportamiento natural de muchos motores de renderizado modernos, incluido tu querido Gecko. –
Es completamente posible que lo que usted piensa es el relleno inferior en el div es causado por otra regla de estilo, por ejemplo, relleno en el elemento body, que es posible si activa/desactiva el modo de caprichos del navegador (jugando con el DOCTYPE tiende a tener ese efecto).
Si ese es el caso, debería ser posible anular el estilo predeterminado con una regla de estilo personalizada.
Firebug puede ser una gran ayuda aquí ya que muestra qué estilos CSS afectan qué elemento DOM.
Ajuste la línea de altura: 0; en el estilo div:
<div style="border:1px solid red; float:left; padding:0; line-height:0;">
<img src="xxx.jpg" />
</div>
El img es un elemento en línea, por lo que ahorra espacio para los caracteres con los descensores. Ajustar la altura de línea en el div elimina el problema. Opcionalmente, también puede cambiar el img para que se muestre como un elemento de bloque.
¿Este es un problema en cada navegador? – rahul
pregunta interesante. Me hizo pensar en la altura de la línea y en el modelo de caja. +1 – Abinadi
Es común en varios agentes de usuario cuando el elemento de imagen es el único elemento dentro de digamos, un 'div' o un' td'. –