html, css – margen invisible extraño debajo de las imágenes

Me voy de plátano aquí, de alguna manera debajo de todas mis imágenes en mi página hay una brecha, un margen que no está allí en el código. Incluso Firebug no puede verlo pero Firefox y Safari lo están renderizando, ¡INCLUSO SIN CSS!

Nunca me pasó antes …!

    Paranoid    
body{ background: #497e9f url(../images/bg.png) repeat-x top; } #container{ width:864px; margin: 8px auto 0 auto; } #sidebar{ /*width:139px;*/ float: left; } #sidebar_bottom{ height:10px; background: url(../images/sidebar_bottom_bg.png) bottom left no-repeat; } #sidebar #logo{ margin-bottom: 2px; } #sidebar #menu{ background: #f2f2f2; border: 0 1px solid #cecece; margin: 0; list-style: none; }

Esto en realidad no es tan raro. Es porque la imagen es un elemento en línea, por lo que hay un espacio entre la parte inferior de la imagen, que se coloca en la línea de base del texto y la parte inferior de la línea de texto.

La solución más sencilla para esto es simplemente usar display:block; para convertir la imagen en un elemento de bloque. Flotando la imagen usando float:left; o float:right; también funciona ya que también lo convierte en un elemento de bloque.

El ajuste de propiedades como vertical-align , font-size y line-height también puede afectar la distancia, pero no es tan robusto como realmente no elimina el efecto. Todavía podría aparecer en algunas circunstancias.

Preguntas relacionadas:
Espaciado no deseado debajo de las imágenes en XHTML 1.0 Strict
¿Por qué mis imágenes tienen espaciado adicional?
Problema de espacio de imagen de IE

Lamento responder a esta pregunta 3 años después, pero esta página está en la primera página de google y me siento responsable ….. respuesta: solo agregue “vertical-align: top;” para img tag dentro de una etiqueta.

Para mi

 font-size: 0; line-height: 0; 

en el contenedor de envoltura hizo el truco.

Intenta cambiar la sección DOCTYPE a:

   

También puede verificar esto: http://www.emailonacid.com/blog/details/C18/12_fixes_for_the_image_spacing_in_html_emails

Bueno, lo tengo.

fue una combinación de

 font-size: 0px; line-height: 1;