link (a) heeft onzichtbare padding o.i.d.

[Verwijderd]

Ik heb op een van mijn websites wat plaatjes in een a-element gezet I.V.M. de lightbox-plugin die ik gebruik. De a-elementen zijn echter altijd 3px hoger dan de afbeelding, ook als

a{
display: inline-block;
}

Ik heb de situatie op JSFiddle gezet: http://jsfiddle.net/uko6for0/

Hierin zie je een plaatje in een a-element (link). Naast display: inline-block; heb ik het a-element een rode kleur gegeven. In het outputvenster is hierdoor te zien dat er een rode rand onder het plaatje uitkomt, wat aantoont dat het a-element langer is dan het plaatje. het plaatje heeft geen marges en het a-element heeft geen padding.

Hoe is het mogelijk dat de link een aantal pixels hoger is dan de inhoudt, terwijl hij een inline-block is en hoe verhelp ik dit probleem?

[Verwijderd]

vertical-align: bottom;
Was 10 jaar geleden ook al de oplossing. Afbeeldingen staan standaard op de baseline.

[RobIII]

Zet eens een vertical-align: bottom op de img