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>
