Come mai è stato visualizzato 4px di riempimento extra sotto l'elemento <a>?

Question

H3LLO,

Per qualche motivo non v'è 4px di imbottitura extra che appare sotto il un elemento. Sto vedendo questo manifest in Firefox e Chrome. Ricordo di aver visto questo fenomeno su Flickr nei suoi primi giorni, tranne che era una barra blu che appariva sotto s avvolto in elementi.

Questo è un link to the example code che illustra il mio problema. Lo sfondo: di a è stato colorato in rosso e il bordo: di img è stato colorato in grigio. Come puoi vedere, l'elemento a si estende per circa 4 px sotto lo img.

per vedere il codice è sufficiente premere il "Modifica utilizzando JSBIN" link che appare in alto a destra quando si passa sopra la finestra.

Qualche idea su come sbarazzarsi di a imbottitura in basso dell'elemento?

Grazie
Adam

Answer 1

aggiungere vertical-align:bottom; alle proprietà CSS img.

Answer 2

Non sono positivo perché si verifica, ma è possibile provare YUI Reset per risolvere il problema.

Answer 3

a {display: inline-block} 
img {display: block} 

immagini sono rese inline di default e avete bisogno di aggiungere display: block o vertical-align: bottom per risolvere il problema.