如何在CSS中正确实现 #ID：hover{}，而不会在其他HTML元素上出错？

问：

所以，我第一次尝试元素，到目前为止我没有遇到任何问题。但是现在，我想要一个 div 框，它有多个链接，就像 一样，目的是有一个用作动画的功能。<div><a><img>#Image:hover

实施也进展顺利，但现在我遇到了我的问题，我没有发现任何具体的问题......每当我将鼠标悬停在 img 元素上时，img 元素都会错位。现在我想知道我可以实现什么，这样它就不会错位......

我有这个CSS部分：

#Icons {
    margin: 8px 0 0;
    padding: 0;
    display: block;
    background-color: transparent;
    min-height: 43px;
    height: 43px;
    max-height: 43px;
}

#Image {
    margin: 0;
    padding: 0;
    width: 40px;
    height: 40px;
}

#Image:hover {
    margin: 0;
    padding: 0;
    width: 43px;
    height: 43px;
}

#Media {
    margin: 0 4px;
    display: inline-block;
    min-width: 43px;
    width: 43px;
    max-width: 43px;
    min-height: 43px;
    height: 43px;
    max-height: 43px;
}

和这个 HTML 部分：

<p id="HeaderTwo">Reachable under</p>
<div id="Icons">
    <a id="Media" href="#"><img id="Image" src="../img/discord.png" /></a>
    <a id="Media" href="#"><img id="Image" src="../img/gmail.png" /></a>
    <a id="Media" href="#"><img id="Image" src="../img/telegram.png" /></a>
    <a id="Media" href="#"><img id="Image" src="../img/youtube.png" /></a>
</div>

我尝试将 folling 位包含在一些 CSS 元素中，希望它能用作框限制器或 sth。类似，因此不会发生错位。

min-width: 43px;
width: 43px;
max-width: 43px;
min-height: 43px;
height: 43px;
max-height: 43px;