Espacio en blanco en la parte inferior de la etiqueta de anclaje

Tengo una etiqueta que rodea una imagen. Tengo un borde en el div en el que está la etiqueta. Tengo el margen y el relleno configurados en 0, pero por alguna razón mi etiqueta sigue siendo unos 3 píxeles más alta que mi imagen. Esto deja un poco de espacio entre la imagen y el borde, lo que destruye la apariencia que quiero lograr.Espacio en blanco en la parte inferior de la etiqueta de anclaje

¿Qué estoy haciendo mal? He probado tanto en Firefox como en Chrome con los mismos resultados. Gracias

Fuente

2010-07-07 Icode4food

La imagen es display: inline por lo que se trata como un personaje y se sienta en la línea de base. La brecha es causada por el espacio proporcionado para el descendente (que se encuentra en letras como j, g, y y p).

Ajuste el vertical-align con CSS: img{vertical-align: bottom}

Fuente

2010-07-07 18:13:55 Quentin

+10

Más específicamente, 'img {vertical-align: bottom}' –

Eso es exactamente lo que está sucediendo. El problema se resuelve si hago 'vertical-align: bottom;' o 'display: block;'. ¿Cuál es la mejor solución? – Icode4food

Ninguno es mejor, simplemente tienen diferentes implicaciones. Los elementos del bloque tienen una línea que los separa y otros efectos secundarios divertidos. – Quentin

display:block es suficiente para esto, si el elemento no tiene hermanos.

Fuente

2010-07-07 18:20:10

Interesante, por lo que el verdadero culpable es la etiqueta de la imagen, no la etiqueta . – Icode4food

Eso es lo que David dijo, todo elemento en línea tendrá espacio para los descensores. Es el comportamiento natural. –

tanto "vertical-align: bottom" como "display: block" eliminarán el "espacio extra blanco" en la parte inferior – aztack

Espacio en blanco en la parte inferior de la etiqueta de anclaje

Respuesta

Cuestiones relacionadas