如何在卡片悬停时添加内边距而不引起布局偏移

本文详解如何通过 box-sizing: border-box、合理设置宽高约束及子元素尺寸策略在卡片 hover 时安全添加 padding避免因盒模型计算导致的布局抖动或相邻卡片位移。 本文详解如何通过 box-sizing: border-box、合理设置宽高约束及子元素尺寸策略在卡片 hover 时安全添加 padding避免因盒模型计算导致的布局抖动或相邻卡片位移。在构建响应式卡片网格如运动员信息展示时一个常见但易被忽视的问题是为 .person:hover 添加 padding 后卡片尺寸“意外增大”导致整个网格错位、其他卡片跳动。根本原因在于 CSS 默认的 content-box 盒模型——此时 width: 200px 仅指内容区宽度额外添加的 padding 会向外扩展突破原有尺寸边界。? 正确解法从盒模型与尺寸控制双管齐下1. 全局启用 border-box基石在样式重置阶段强制所有元素使用 border-box确保 padding 和 border 被包含在设定的 width/height 内*, *::before, *::after { box-sizing: border-box;}这是实现“hover 增 padding 不扩容”的前提条件。2. 卡片容器需显式固定尺寸非仅 width原代码中 .person 依赖 grid-template-columns 限定宽度但未约束高度与内边距空间。应改为.person { width: 200px; /* 显式定宽 */ height: 231px; /* 显式定高含 padding 预留空间 */ padding: 10px; /* hover 前已有基础 padding */ transition: all 300ms;}.person:hover { padding: 20px; /* hover 时 padding 增加但总尺寸不变 */ background-color: var(--hover-color); border-radius: 10px;}?? 关键点height: 231px 必须是 最终渲染高度即包含 hover 后 padding 的总高。若原始无 padding 高度为 211px则 hover 后 padding: 20px 对应的 height 应设为 211px 2×10px 231px。 Tellers AI Tellers是一款自动视频编辑工具可以将文本、文章或故事转换为视频。