This is a funny problem that I ran into myself just minutes ago, and after searching and searching on Google to find a fix and finding absolutely nothing, I had to find my own fix.

I have an <a href> surrounding an image, and it was for some reason 5 pixels higher then the image (despite being display:inline-block and whatnot). I was dumbfounded.

After mucking around with Firebug for a while, I found that the a was inheriting a line-height value like most things on the page. On disabling this line-height value, the problem was fixed!

If the image height is a perfect multiple of the line height value (mine was 18px for example), then this won’t cause a problem. But for 90% of other cases, putting the line-height equal to 0 fixes it.

TLDR; Set line-height for the <a href> to ’0px’;