这个问题的核心原因是：元素的边框属于盒模型的一部分，当你在悬停时增加边框宽度，元素的实际尺寸（宽度+左右边框，高度+上下边框）会变大，从而挤压下方元素，导致图片偏移。你之前尝试的margin-bottom和z-index之所以没用，是因为margin-bottom只是增加元素下方间距，但元素本身尺寸变大仍会占据更多空间；z-index只控制层级，不影响布局占位。

下面给你几个实用的解决方案，按推荐程度排序：

1. 初始状态设置透明边框（最推荐） #

给.plans-col默认设置和悬停时相同宽度的透明边框，这样悬停时只改变边框颜色，元素的整体尺寸不会变化，自然不会影响下方布局：

.plans-col {
  /* 保留你原有的样式：width、float、padding等 */
  border: 2px solid transparent; /* 宽度和你悬停时的边框宽度一致 */
}

.plans-col:hover {
  border-color: #your-hover-color; /* 只修改颜色，宽度不变 */
}

这个方法兼容性拉满，完全符合你原本的视觉需求，而且不会有任何布局副作用。

2. 使用outline代替border #

outline是绘制在元素外部的线条，不属于盒模型，所以不会改变元素的占位尺寸：

.plans-col:hover {
  outline: 3px solid #your-hover-color;
  outline-offset: 0; /* 可调整线条与元素的距离，默认0 */
}

注意：outline不支持border-radius，如果你的卡片有圆角，这个方法可能会出现直角线条，视觉上不太协调。

3. 用box-shadow模拟边框 #

box-shadow同样不影响盒模型尺寸，还支持圆角，适合需要圆角的场景：

.plans-col:hover {
  box-shadow: 0 0 0 3px #your-hover-color; /* 第四个参数是扩展半径，模拟边框宽度 */
}

这种方法可以做出一些特殊效果，比如模糊边框，如果你需要的话还可以调整前两个参数（水平/垂直偏移）和第三个参数（模糊度）。

4. 用transform缩放（视觉替代方案） #

如果可以接受元素轻微缩放的视觉效果，也可以用transform: scale()来模拟边框变粗的感觉，元素的占位空间不会改变：

.plans-col {
  transition: transform 0.3s ease;
  transform-origin: center center;
}

.plans-col:hover {
  transform: scale(1.02); /* 轻微放大，视觉上类似边框变粗 */
  border: 2px solid #your-hover-color; /* 可选，配合缩放增强效果 */
}

这个方法适合追求轻量化动画效果的场景，但要注意缩放比例不要太大，避免影响整体布局的协调性。

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