求助：表格中盒子内边距增大致行高变化，标记需实现悬停放大

嘿，我完全懂你遇到的困扰——想让表格里的标记盒子在鼠标悬停时放大突出，但调整内边距会把整行的高度都带起来，破坏了表格的整体布局对吧？

问题根源 #

表格的行高是由单元格内的内容高度决定的，当你给标记盒子增加内边距时，单元格的实际高度会被撑开，自然会带动整行高度变化。

最优解决方案：用 transform: scale() 实现视觉放大 #

这个方法的好处是只改变元素的视觉大小，不会修改它的实际占位尺寸，所以完全不会影响表格行高。具体做法如下：

1. 先给你的标记盒子设置基础样式（比如边框、固定尺寸）
2. 悬停时通过 transform: scale() 放大，搭配 transform-origin 控制放大的中心点，再加上 transition 让动画更平滑

以下是修改后的代码示例：

.container {
  position: absolute;
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0;
  margin: 0;
}

#mark_table {
  text-align: center;
  padding: 0;
  border: 1px solid #DDDDDD;
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* 假设你的标记盒子类名为 .mark-box */
.mark-box {
  display: inline-block;
  border: 1px solid #ccc;
  width: 24px;
  height: 24px;
  line-height: 24px; /* 让内容垂直居中 */
  border-radius: 4px;
  transition: transform 0.2s ease; /* 平滑过渡动画 */
  transform-origin: center center; /* 以中心为原点放大 */
}

.mark-box:hover {
  transform: scale(1.2); /* 放大1.2倍，可按需调整 */
  border-color: #666; /* 可选：悬停时加深边框色增强视觉反馈 */
}

额外提示 #

• 如果你的标记盒子需要保留内边距，也可以先把内边距设好，悬停时只用 scale() 放大，这样既保证了基础样式，又不会影响行高
• 要是担心放大后的盒子会盖住旁边的内容，可以给标记盒子加 z-index: 1 确保它在顶层

这样调整后，鼠标悬停时标记会平滑放大，而表格的行高完全不会受影响，完美解决你的问题！

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