响应式 padding 应用 rem + clamp() 或有限断点统一调控根字号，而非为每个 padding 写媒体查询；因固定像素在窄屏下不缩放，导致文字换行异常、按钮贴边、视觉密度失衡，且破坏盒模型比例，易引发横向滚动或留白失控。
响应式 padding 不是给每个 padding 都套媒体查询，而是用 rem + clamp() 或有限断点统一调控根字号或容器级值。
为什么直接写 padding: 20px 在手机上会显得太挤
固定像素在窄屏下不缩放，而内容宽度变小，导致文字换行异常、按钮贴边、视觉密度失衡。更关键的是：当父容器用 max-width: 100% 或 rem 宽度时，子元素却用 px padding，盒模型比例就断了。
- 375px 屏宽下，
padding: 20px占总宽约 10.7%，远超舒适留白区间（建议 4%–8%） - 同一组卡片在 iPad 横屏（1024px）和竖屏（768px）下，
padding: 20px的视觉重量差异极大 - 没统一
box-sizing: border-box时，width: 100%+padding: 16px会撑出横向滚动条
用 clamp() 实现平滑缩放的 padding
clamp() 是目前最轻量、最可控的响应式内边距方案，适合字号、行高、padding 这类需连续过渡的属性。
- 在
:root中设：font-size: clamp(14px, 2.5vw, 16px);—— 小屏最小 14px，大屏封顶 16px，中间按视口线性过渡 - 所有 padding 改用
rem：padding: 1rem;、padding: 1.25rem 1.5rem; - Safari 13.1+ 和 Chrome 85+ 支持稳定；老浏览器回退为固定
font-size: 16px即可 - 别混用：
padding: 1rem和padding: 12px同时存在，会导致缩放节奏错乱
真要写媒体查询，只改容器级 padding，不动子元素
断点不是越多越好，聚焦三个典型宽度即可：480px（窄屏）、768px（平板竖屏临界）、1024px（桌面起始）。所有改动只发生在容器上，比如 .card、.section、body。
立即学习“前端免费学习笔记（深入）”；
- 用
min-width自下而上增强，避免覆盖混乱：@media (min-width: 768px) { .section { padding: 2rem; } } - 断点之间不能留空档，否则在 479.5px 或 767.8px（如缩放 110% 的手机）下，
padding会回退到未定义状态 - 别在
gap容器里又给子项加padding或margin，那会叠加出意料之外的空白 - 如果用了
display: grid或display: flex，优先用gap控制子项间距，它天生不参与盒模型计算
表格单元格的响应式 padding 怎么设
HTML 的 cellpadding 是过时属性，现代项目必须用 CSS 的 padding 作用于 td 和 th 元素。
- 全局控制：
td, th { padding: 0.75rem 1rem; }，配合根字号动态缩放 - 响应式微调：
@media (max-width: 480px) { td, th { padding: 0.5rem 0.75rem; } } - 注意：
padding不接受负值，设padding: -4px会被浏览器静默丢弃 - 行内元素（如
span）设padding时，padding-top/padding-bottom不推挤行高，但影响背景和点击热区
真正难的不是写多少代码，而是决定哪些地方该用 clamp()、哪些该用断点、哪些该交给 gap——选错一层，后面全得返工。
