<a> öğemde görünen 4px fazladan dolgu var mı? Nedense

Question

H3LLO,

bir eleman altında görünmesini ekstra dolgu 4 piksel var. Bu bildirimi hem Firefox'ta hem de Chrome'da görüyorum. Flickr'da bu fenomeni ilk günlerinde görmeyi hatırlıyorum, çünkü öğelerin içinde sarılı olarak görünen mavi bir çubuk vardı.

Sorunumu gösteren bir link to the example code İşte. ve'un arka planı kırmızı renktedir ve kenarlık: img gri renktedir. Gördüğünüz gibi, a öğesi, img'un yaklaşık 4px altındadır.

kod sadece pencerenin üzerine geldiğinizde sağ üst köşesinde görünen "JSBIN kullanılarak Düzenle" tuşuna bakın.

öğesinin ekstra alt dolgudan nasıl kurtuluşa ilişkin herhangi bir fikir var mı?

Teşekkür
Adam

Answer 1

sizin img css özelliklerine vertical-align:bottom; ekleyin.

Answer 2

Neden olmuyor, ancak düzeltmek için YUI Reset deneyebilirsiniz.

Answer 3

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

Resimlere varsayılan olarak satır içi işlenen ve bu sorunu düzeltmek için display: block veya vertical-align: bottom eklemeniz gerekir.