百分比 padding-top 从未失效，其计算基准始终是父容器宽度而非高度；例如父宽400px时padding-top:50%恒为200px，与元素自身或父容器高度无关。
百分比 padding-top 从来就没“失效”，它只是严格按规范算——基准是父容器的宽度，不是高度。你看到的“异常”，其实是预期和现实错位。
为什么 padding-top: 50% 不等于元素高度的一半？
CSS 规范规定：padding-top 和 padding-bottom 的百分比值，全部基于**包含块（containing block）的宽度**计算。哪怕你写的是垂直方向的内边距，它也跟元素自身高度或父容器高度无关。
- 若父容器宽 400px，
padding-top: 50%就是 200px，无论子元素高 20px 还是 800px - 在响应式布局中，窗口缩小时父宽变小，
padding-top会同步缩小，但元素内容区可能被压扁或溢出 - 常见误判场景：想用
padding-top: 56.25%实现 16:9 容器，结果发现高度随屏幕宽度变化，而非视口高度
用 calc() 或 aspect-ratio 替代百分比 padding
当你要让垂直内边距真正跟随元素自身尺寸或视口比例时，硬套百分比只会引入不可控变量。直接换更可靠的方案：
-
aspect-ratio: 16/9+padding分离：给容器设宽高比，再用固定单位padding控制内容间距，不干扰比例 -
padding-top: calc(100vh * 0.1)：用视口单位配合calc()，明确表达“视口高的 10%”，避免依赖父宽 -
padding-top: clamp(1rem, 5vw, 2rem)：在最小、适配、最大之间平滑过渡，比纯百分比更可控
别在行内元素上试 padding-top 百分比
a、span 这类默认 display: inline 的元素，上下 padding 本就不撑开空间——百分比值会被解析，但不会渲染为占位区域。
立即学习“前端免费学习笔记（深入）”；
- 先改
display: inline-block或inline-flex，否则padding-top再精确也看不见 - 改完后注意
vertical-align默认是baseline，容易导致底部留白；建议显式设为middle或top - 多个
inline-block元素间有空格间隙，可用父容器font-size: 0消除，子元素再重置font-size
真正难的不是写对那行 CSS，而是意识到：百分比 padding 的“基准”从不为你当前想要的效果服务。盯住目标（比如“占屏幕三分之一高”），就该用 vh；想要“等宽等高”，就用 aspect-ratio；需要弹性缩放，clamp() 比百分比更诚实。别和规范较劲，绕过去就行。
