如何为卡片的:hover状态添加padding且不产生偏移？

我有一个宽度为200像素的卡片，需要在鼠标悬停（:hover）时添加10px内边距，但要求不改变卡片自身尺寸，也不能让其他卡片移位。

原CSS代码：

.person {
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
  grid-column: span 1;
  gap: 8px;
  padding-inline: 10px;
  padding-top: 10px;

  max-height: 231px;
  
  cursor: pointer;
  transition: all 300ms;
}

.person:hover {
  background-color: var(--hover-color);
  border-radius: 10px;
}


.extra {
  visibility: hidden;
  
  margin-bottom: 16px;

  font-size: 18px;
  color: var(--black-color);
}

.person:hover .extra {
  visibility: visible;
}


/* with fixed height */
.details {
  transition: all 300ms;
  width: 100%;
  padding-inline: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.person:hover .details {
  background-color: var(--hover-color);
}

要实现悬停加padding但不改变卡片尺寸、不影响其他元素的效果，核心是利用CSS的box-sizing: border-box属性，同时处理显示.extra带来的高度变化，具体修改如下：

1. 固定卡片尺寸并开启内减模式 #

给.person添加固定宽度和box-sizing: border-box，确保padding的增减不会改变卡片的总宽高：

.person {
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
  grid-column: span 1;
  gap: 8px;
  padding: 0;
  width: 200px;
  height: 231px; /* 用固定高度替代max-height，避免显示.extra时高度变化 */
  box-sizing: border-box; /* 关键：让padding包含在width/height内 */
  
  cursor: pointer;
  transition: all 300ms;
}

2. 悬停时添加padding #

在:hover状态下添加10px padding，此时因为box-sizing: border-box，卡片总尺寸不会改变：

.person:hover {
  background-color: var(--hover-color);
  border-radius: 10px;
  padding: 10px; /* 新增10px内边距 */
}

3. 处理.extra的显示不影响高度 #

将.extra设置为绝对定位，脱离文档流，这样显示时不会占用额外空间，避免卡片高度变化：

.extra {
  visibility: hidden;
  position: absolute;
  bottom: 16px; /* 调整位置到合适区域 */
  font-size: 18px;
  color: var(--black-color);
}

.person:hover .extra {
  visibility: visible;
}

4. 简化.details样式 #

因为卡片开启了border-box，.details的padding不会溢出，同时可以将hover背景整合到.person的hover样式中，简化代码：

.details {
  transition: all 300ms;
  width: 100%;
  padding-inline: 10px;
}

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