Wie kommt es, dass 4px extra Polsterung unter meinem <a> Element erscheint?

Question

H3LLO,

Aus irgendeinem Grund ist es 4px extra Polsterung unter dem Element ein erscheinen. Ich sehe dieses Manifest sowohl in Firefox als auch in Chrome. Ich erinnere mich, dass ich dieses Phänomen auf Flickr in seinen frühen Tagen gesehen habe, außer dass es ein blauer Balken war, der unter Elementen erschien.

Hier ist eine link to the example code, die mein Problem veranschaulicht. Der Hintergrund: von ein wurde rot gefärbt und der Rand: img wurde grau gefärbt. Wie Sie sehen können, erstreckt sich das a Element um 4px unter dem img.

Um der Code einfach die Taste „Bearbeiten mit JSBIN“ Link zu sehen, die in der oberen rechten Ecke angezeigt, wenn Sie über das Fenster schweben.

Irgendwelche Ideen, wie a element extra Bodenpolster loswerden?

Dank
Adam

Answer 1

vertical-align:bottom; zu Ihren img CSS-Eigenschaften hinzuzufügen.

Answer 2

Ich bin nicht positiv, warum es auftritt, aber Sie könnten YUI Reset versuchen, es zu beheben.

Answer 3

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

Bilder werden inline standardmäßig gemacht und Sie müssen display: block oder vertical-align: bottom hinzuzufügen, um das Problem zu beheben.