Quería compartir con vosotros la solución a un problema que me ha traído de cabeza unos cuantos meses :(
Resulta que por costumbre, siempre uso el reset CSS de Eric Meyer (http://meyerweb.com/eric/tools/css/reset/). Lo que conseguimos con esto es ajustar las propiedades de estilo de las etiquetas HTML a unas conocidas e iguales; impedimos así que cada navegador aplique sus estilos por defecto, y que la web se vea igual en cualquiera de ellos. No es la panacea, pero ayuda bastante.
El problema viene cuando metemos una imagen (<img.../>) dentro de un div, enmarcamos ese div (con border, o padding+bg-color o algo así) y... ¡Vaya! Nos queda un espacio en la parte inferior de la imagen. Un espacio entre la imagen y el border, o un mayor grosor si hemos usado background. Es algo bastante molesto, la verdad.
La solución está en modificar la propiedad "vertical-align" de las etiquetas img en las que tengamos ese problema. Con un "vertical-align: bottom;" veremos que ese espacio desaparece. Evidentemente, no siempre nos interesará una alineación al bottom, pero si os veis en esta situación, ya sabéis cómo resolverlo.
Tal vez os parezca algo tonto, pero ya os digo que a mi me ha supuesto un quebradero de cabeza durante bastante tiempo.
Un saludo a todos!!!
Resulta que por costumbre, siempre uso el reset CSS de Eric Meyer (http://meyerweb.com/eric/tools/css/reset/). Lo que conseguimos con esto es ajustar las propiedades de estilo de las etiquetas HTML a unas conocidas e iguales; impedimos así que cada navegador aplique sus estilos por defecto, y que la web se vea igual en cualquiera de ellos. No es la panacea, pero ayuda bastante.
El problema viene cuando metemos una imagen (<img.../>) dentro de un div, enmarcamos ese div (con border, o padding+bg-color o algo así) y... ¡Vaya! Nos queda un espacio en la parte inferior de la imagen. Un espacio entre la imagen y el border, o un mayor grosor si hemos usado background. Es algo bastante molesto, la verdad.
La solución está en modificar la propiedad "vertical-align" de las etiquetas img en las que tengamos ese problema. Con un "vertical-align: bottom;" veremos que ese espacio desaparece. Evidentemente, no siempre nos interesará una alineación al bottom, pero si os veis en esta situación, ya sabéis cómo resolverlo.
Tal vez os parezca algo tonto, pero ya os digo que a mi me ha supuesto un quebradero de cabeza durante bastante tiempo.
Un saludo a todos!!!