Html 为什么我的图像在悬停时会移动

所以我在我的网站上有一个div里面的图像，上面有一个8px的边框，就像一个缩略图，这样当我点击img时，它就会链接到一个页面。但是，当我将鼠标悬停在图像上时，它会移动（我认为准确地说）16px（两侧边框的长度）。这与图像悬停时div有边框这一事实有关系吗？当图像悬停时，它不再在div中了？我不知道。有一些解释的理由会很好。这是我的代码

HTML:

---

我尝试过使用img a:hover之类的方法来更改内容，也尝试过左边距：-16px，但这也不起作用。希望您能提供任何帮助。谢谢您必须使用

a img:hover

，而不是

img a:hover

，例如

img a:hover {
    margin-left: -16px;
}

---

我对你的东西做了一个JSFIDLE，现在悬停没有问题。我不确定它是否曾经悬停过，但你的CSS都很正常。里面不应该有随机的

标记，因为

根本不是CSS的一部分。这是你的JSFIDLE

你不需要
在cssI中添加，因为预览没有用行显示给我，所以在我粘贴代码后，我在css irl中没有br！谢谢，我的css中没有
标记，只是当我在网站上写这篇文章时，它没有任何行，所以我不得不添加它们，但后来它在这个页面上有了它们，所以这是一个迷雾代表我
.box {
    height: 250px;
    width: 250px;
    margin-right: 20px;
    border: 8px solid white;
    float: left;
    display: block;
}


 img {
    width: 250px;
    height: 250px;
    -moz-transform: rotate(0);
    transform: rotate(0);
}

img a:hover {
    margin-left: -16px;
}