下面我正在编写HTML代码，当我们在悬停时向元素添加边框时出现问题，你可以看到，即使如此，问题是如何摆脱移动元素我们希望rest元素仍然只停留在很多我的网页出现了这个问题所以请帮我详细解答是什么原因而不只是解决这个特定的代码 https://codepen.io/shahrishit9/pen/aEdJWa?editors=1100在这个代码中我们也可以发生相同的事情请检查它
body{background-color:pink;font-family-arial;font-size:1.10em;}
#para{
margin:0px 50px 30px 50px;}
#footerMenu {text-align:center;}
#creator{text-align:center;}
a{padding:0px 10px;margin:10px;text-decoration:none;color:black;}
a:hover{border: solid 2px lightblue;}<HTML lang ="en">
<head>
<title>
My new footer
</title>
<meta charset = utf-8>
</head>
<body>
<div>
<section id="para">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
<footer>
<section id="footerMenu">
<a href=https://www.instagram.com/>Instagram</a>
<a href=https://www.facebook.com/>Facebook</a>
<a href=https://www.twitter.com/>Twitter</a>
<a href="">Site Map</a>
</section>
<section Id="creator">
design and code by Rishit Shah
</section>
</footer>
</div>
</body>
</HTML>这是因为当您添加边框时，元素的高度会额外增加2px。额外的高度显示元素移动了一点点。您最初可以为元素应用透明边框，然后在悬停时应用实际边框。通过这种方式，您无法区分元素位置。
li {
line-height:10px;
display:block;
padding:10px;
max-width:150px;
text-align:center;
margin:10px;
border:1px solid transparent;
}
像这样改变它：
a{border:solid 2px transparent;} // Add this with your other css property.
a:hover{
border-color: lightblue;
}