实现社交图标Hover样式（边框/内边距/字号）且不影响父容器高度

需求说明 #

实现社交图标鼠标悬停时的如下效果，且不影响父容器高度：

• 添加边框
• 0.5rem 内边距
• 字号从默认 2rem 调整为 2.2rem

核心思路 #

要解决hover时父容器高度跳动的问题，核心是在默认状态下提前为边框、内边距预留空间，让hover时只是修改样式属性，而非新增元素尺寸：

1. 默认给a标签设置透明边框，hover时改为目标颜色
2. 用box-sizing: border-box确保内边距和边框不会额外扩大元素尺寸
3. 提前计算好默认内边距，和hover时的内边距差值抵消边框宽度，避免布局偏移

完整代码实现 #

HTML（保持原结构）

<div class="social-links">
  <div>
    <span>شبکه اجتماعی:</span>
    <a href="#"><i class="fa fa-instagram"></i></a>
    <a href="#"><i class="fa fa-telegram"></i></a>
    <a href="#"><i class="fa fa-whatsapp"></i></a>
    <a href="#"><i class="fa fa-linkedin"></i></a>
    <a href="#"><i class="fa fa-youtube"></i></a>
  </div>
</div>

CSS

/* 默认样式：预留空间，避免hover时布局偏移 */
#g-footer .footer-b .social-links div a {
  display: inline-block;
  box-sizing: border-box; /* 边框和内边距计入元素尺寸 */
  border: 1px solid transparent; /* 预留边框空间，默认透明 */
  padding: calc(0.5rem - 1px); /* 抵消边框宽度，和hover内边距匹配 */
  font-size: 2rem;
  border-radius: 50%;
  line-height: 1;
  text-align: center;
  transition: all 0.3s ease; /* 平滑过渡效果 */
}

/* hover效果 */
#g-footer .footer-b .social-links div a:hover {
  color: #40c2be;
  border-color: #40c2be;
  padding: 0.5rem;
  font-size: 2.2rem;
}

关键细节解释 #

• box-sizing: border-box：让元素的宽高包含边框和内边距，彻底避免尺寸计算混乱
• 透明默认边框：hover时仅修改边框颜色，不会新增边框导致元素尺寸突变
• 计算默认内边距：calc(0.5rem - 1px)抵消了1px边框的宽度，保证默认和hover状态下元素的实际占用空间一致
• 过渡动画：添加transition让hover效果更自然，不会生硬切换

内容的提问来源于stack exchange，提问作者jawad alizada