别用百分比设上下 padding，优先用 rem 配合媒体查询调根字号，表格和按钮等特定场景要单独处理；因为百分比 padding-top 按父容器宽度计算而非高度，小屏下值过小导致留白消失，大屏则空白过大，仅当父宽稳定且需随宽缩放时才适用于左右方向。
直接说结论：别用百分比设上下 padding，优先用 rem 配合媒体查询调根字号，表格和按钮等特定场景要单独处理。
为什么百分比 padding-top 在手机上经常“失效”
百分比 padding 全部按父容器宽度计算，不是高度——哪怕你写的是 padding-top: 10%，它也取父宽的 10%，不是视口高。小屏手机宽度小，10% 可能只算出几像素，内容贴顶；大屏反而撑出巨大空白。
- 常见错误现象：
section设了padding-top: 5%，在 iPhone 竖屏下几乎看不见留白，横屏却突然跳高一截 - 仅当父容器宽度稳定（比如固定宽度的卡片容器）且你明确需要“随宽度缩放”时，才考虑左右方向用百分比
- 绝对不要对
body或全屏div直接设padding-top: X%
rem 内边距怎么配媒体查询才真正响应
rem 本身不自动响应，必须配合动态改 html 的 font-size。硬套 clamp() 在根元素上，旧版 Safari 会崩——得用分段媒体查询。
- 推荐写法：
html { font-size: 16px; }
@media (max-width: 768px) { html { font-size: 14px; } }
@media (max-width: 480px) { html { font-size: 12px; } }padding: 1.5rem 在桌面是 24px，平板 21px，手机 18px，缩放平滑padding: 1rem 12px 这种写法会让横向固定、纵向缩放，逻辑断裂rem 没问题，但图标如果也用 rem，得确认其父容器没重置 font-size
表格和 Flex 容器里 padding 怎么不踩坑
表格单元格默认有浏览器内置样式，padding 经常被忽略；Flex 里 gap 和 margin 叠加容易多出一倍间距。
立即学习“前端免费学习笔记（深入）”；
- 表格先清掉默认边框干扰：
table { border-collapse: collapse; }，再给td, th设padding - Flex 子项如果同时设了
gap: 1rem和margin-bottom: 1rem，底部会空出 2rem——首尾间距应由父容器padding控制，子项只管内部 - 导航栏水平留白用
padding: 0.75rem 5%（百分比保呼吸感），垂直用rem保点击区域高度
最易被忽略的一点：所有 padding 值都受 box-sizing 影响。没全局设 * { box-sizing: border-box; }，光调 padding 会让元素总宽失控——尤其固定宽度的输入框或卡片。
