当内容旁边的边距移动时，如何使其固定？

Question

所以我正在用 html 和 css 做我的第一个项目，其中一个任务是并排（水平）对齐 4 个图标，并使它们在我将鼠标移到其上时稍微“增长”一点。问题是，当鼠标经过时，边框会增大，为了保持边距，它会推动其他图标，而我不想这样做，我只想移动光标所在的一个图标。我已经找了3个小时的解决方案了，但没找到。 希望这一切都清楚了。这是我的 html 和 css 代码：

HTML

    <div class="icones">
            <div class="icons">
                <a href="http://" target="_blank">
                    <ion-icon name="logo-github"></ion-icon>   
                </a>

                <a href="http://" target="_blank">
                    <ion-icon name="logo-whatsapp"></ion-icon>
                </a>

                <a href="http://" target="_blank">
                    <ion-icon name="logo-instagram"></ion-icon>
                </a>

                <a href="http://" target="_blank">
                    <ion-icon name="logo-discord"></ion-icon>
                </a>
            </div>
          </div>

CSS

 .icones {
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 28px;
   border: solid #ffffff;
   box-sizing: content-box;
   height: 70px;
}

 .icons a {
   display: inline-flex;
   align-items: center;
   justify-content:center;
   font-size: 28px;
   margin: 10px;
   box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
   border: solid red;
}

.icons a:hover{
    background: rgba(255, 255, 255, 0.02);
    border-radius: 50%; 
    padding: 15px;
}

Answer 1

只需在

scale

上使用

:hover

（并过渡以获得漂亮的动画）

.icons a {
  /* Default styles here ... */
  transition: scale 0.3s;
}

.icons a:hover {
  /* Hover styles here ... */
  scale: 1.1;
}