容器Div内元素被挤到外部？悬停圆形边框布局异常排查

我尝试为容器div内span元素中的表情符号添加圆形边框，该边框需在鼠标悬停时显示（此功能已实现），但悬停时span内的表情会被挤到div外部。

相关代码如下：

HTML代码 #

<div className={styles.emojiContainer} key={index} >
   <span className={styles.emoji} role="img" aria-label={feeling} onClick={handleClick} >😄</span>
   <p>happy</p>
</div>

CSS代码 #

.emojiContainer {
  display: flex;
  flex-direction: column;
  align-items: center;

  p {
    margin-top: 1rem;
  }
}

.emoji {
  display: inline-block;
  border-radius: 50%;
  font-size: 3.5rem;
  height: 3.5rem;
  width: 3.5rem;
}

.emoji:hover {
  border: 4px solid #2773e2;
}

解决方法 #

问题根源是CSS默认的content-box盒模型：边框会额外增加元素的总尺寸，原本3.5rem的元素在hover时会变成3.5rem + 8px（上下左右各4px边框），超出了容器的对齐范围，导致表情偏移。

有两种简单的修复方式：

1. 使用border-box盒模型
   让边框包含在元素的width/height范围内，元素总尺寸保持不变：

.emoji {
  display: inline-block;
  border-radius: 50%;
  font-size: 3.5rem;
  height: 3.5rem;
  width: 3.5rem;
  box-sizing: border-box; /* 添加此行 */
}

2. 提前预留边框空间
   给元素设置透明边框，hover时仅修改边框颜色，确保元素尺寸始终一致：

.emoji {
  display: inline-block;
  border-radius: 50%;
  font-size: 3.5rem;
  height: 3.5rem;
  width: 3.5rem;
  border: 4px solid transparent; /* 提前添加透明边框 */
}

.emoji:hover {
  border-color: #2773e2; /* hover时替换边框颜色 */
}

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