HTML/CSS中如何实现图标悬停放大且不挤压相邻元素？

问题核心是：悬停时添加padding会改变元素的实际占用空间，从而挤压相邻图标。以下是两种简单有效的解决方法：

方法1：用transform: scale()实现视觉放大（推荐） #

这种方式不会改变元素的实际尺寸，仅做视觉缩放，完全不会影响布局。修改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;
  /* 添加过渡动画，让放大效果更平滑 */
  transition: transform 0.2s ease;
}

.icons a:hover {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 50%;
  /* scale(1.2)表示将元素放大至原尺寸的120% */
  transform: scale(1.2);
}

方法2：固定元素尺寸，避免padding改变布局 #

如果一定要用padding实现效果，可以给a标签设置默认状态的padding与hover时一致，仅在hover时修改背景和圆角：

.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;
  /* 默认状态设置与hover时相同的padding，避免尺寸变化 */
  padding: 15px;
  /* 添加过渡动画 */
  transition: background-color 0.2s ease, border-radius 0.2s ease;
}

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

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>

内容的提问来源于stack exchange，提问作者Guilherme Silva