I have an image inside an anchor tag. I would like the image to have a thick gray border, and when I hover it with the mouse the image should be surrounded by a thin black border, that doe not cover the gray border completely. I implemented this idea with two borders: the image has a border and the anchor has another border. In my understanding should work fine but it does not: there is a sort of padding margin in the bottom side of the image. Am I doing something wrong with the styles ? Here is the code I use, just copy and paste it to see it yourself:
<!DOCTYPE html>
<html>
<head>
<style>
a img {border:1px #cccccc solid}
a:hover img {border:1px #000000 solid}
a {float:left;border:2px #cccccc solid}
</style>
</head>
<body>
<a href=""><img src="https://sites.google.com/site/davikokar/lavaligiafelice/puglia2012/thumbs/IMG_7861_2_3.jpg"/></a>
</body>
</html>
add display:block to the img
http://jsfiddle.net/renekoch/MDy3n/