box-sizing: border-box 是必须加的，不加它，任何「自适应」都是纸糊的——padding 一上，宽度就超、换行错位、阴影被裁、移动端直接溢出。
直接说结论：box-sizing: border-box 是必须加的，不加它，任何「自适应」都是纸糊的——padding 一上，宽度就超、换行错位、阴影被裁、移动端直接溢出。
为什么 padding 会让卡片撑破容器
默认 box-sizing: content-box 下，width: 100% 只管内容区，padding: 16px 和 border: 1px 都额外加在外部。比如卡片设了 flex-basis: calc(33.33% - 20px)，但没配 box-sizing: border-box，那实际总宽 = 内容宽 + 左右 padding + 左右 border，直接突破计算值。
- Flex 子项撑破换行：常见于
flex-basis: 25%+margin: 8px却没减 border/padding，导致四张卡总宽 > 100% - Grid 卡片错位：用
grid-template-columns: repeat(4, 1fr)，但卡片内padding让内容挤出，视觉上“不等宽” - 移动端横向滚动：小屏下
padding: 20px+width: 100vw→ 实际 > 100vw
flex-wrap 布局中 flex-basis 怎么算才不被 padding 干扰
flex-basis 是内容区宽度，不包含 padding、margin、border；但你希望卡片“整体”占满某比例，就得手动把它们扣掉——前提是先用 box-sizing: border-box 把 padding 和 border 锁进 width 范围里，否则 calc() 算出来的还是错的。
- 4 列布局，每卡左右
margin各12px（即每行 3 个间隙 × 24px = 72px）→flex-basis: calc((100% - 72px) / 4) - 必须确保卡片自身有
box-sizing: border-box，否则padding: 16px还会从内容区往外撑 - 别写
calc(25% - 12px)：百分比和 px 单位混用时，-两边单位必须明确，漏px就是无效声明
卡片阴影被裁、底部留白不连贯？检查 padding 和 margin 的分工
阴影被裁，90% 是因为父容器 overflow: hidden，而子卡片用了 margin-bottom 拉开距离——margin 在盒模型外，不参与渲染区域计算，父容器裁剪时直接把阴影切掉；padding-bottom 属于卡片自身“可见区域”，背景、边框、阴影都跟着延伸。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：卡片用
padding-bottom: 24px控制底部留白，父容器用gap: 16px控制卡片间距 - ❌ 错误：卡片用
margin-bottom: 24px，又给父容器加overflow: hidden（尤其 Flex/Grid 容器） - 注意
gap不兼容 IE，若需支持，改用margin时务必配合:first-child/:last-child清除首尾多余间距
移动端卡片 padding 值怎么设才不空不挤
固定像素值在不同设备上表现差异极大。padding: 20px 在桌面端舒服，在 iPhone SE 上可能让文字只剩一行可读空间。相对单位才是解法，但得配合 box-sizing: border-box 才稳。
- 基础用
em：padding: 0.75em 1em（随字体缩放，且自动适配line-height变化） - 断点微调：
@media (max-width: 480px) { .card { padding: 0.5em 0.75em; } } - 统一设计系统变量：
--spacing-md: 16px，然后padding: var(--spacing-md)，改一处全链路生效 - 绝对别用
padding: 10%配width: 200px——百分比按父宽算，结果完全不可控
真正卡住自适应效果的，从来不是某个属性写得不够炫，而是 box-sizing: border-box 漏了、gap 和 margin 混用了、或者以为 flex-basis 能自动理解“我想要的是整体宽度”。这些地方一松动，padding 就立刻变成撑破布局的导火索。
