padding-top 百分比基于父容器宽度而非高度计算，这是 CSS 规范为避免循环依赖而设定的规则；如需按高度设置，可用 calc() 配合 CSS 变量、vh 单位或改用 grid/flex 布局。
CSS 中 padding-top 写百分比时“看起来不对”，不是写错了，而是它本就不基于父容器高度计算，而是基于父容器宽度。这是 CSS 规范明确规定的（包括 padding/margin 的上下方向），目的是支持响应式宽高比布局（比如视频容器、图片占位）。如果你期望“按父高 20% 设置上内边距”，直接写 padding-top: 20% 必然失效——尤其当父宽高比例变化时，数值会漂移。
为什么 padding-top 百分比是按宽度算的？
这是 CSS 盒模型的历史设计：垂直方向的 padding 和 margin 百分比值统一参考包含块（containing block）的宽度，而非高度。这样能避免循环依赖（比如高度依赖 padding，padding 又依赖高度）。所以：
- 父容器宽 400px →
padding-top: 25%= 100px，无论父高是 100px 还是 800px - 父容器变窄到 200px → 同样
padding-top: 25%立刻变成 50px
想真正按父容器高度设置 padding-top？用 calc() 配合 CSS 自定义属性
纯 CSS 想实现“padding-top = 父高 × 比例”，需借助 calc() + vh 或动态变量。常见可靠方案：
-
场景：父容器高度固定或可预估 → 用
vh单位近似，例如：padding-top: calc(20vh * 0.3)（即视口高的 30%，适合全屏模块） -
场景：父高由内容撑开，但你知道比例（如 16:9 容器） → 用
aspect-ratio+padding-top模拟（传统技巧），例如：padding-top: 56.25%（9/16=0.5625）让子元素定位占满 -
场景：需要精确响应父实际高度（现代浏览器） → 结合
container-type: size和@container查询，但目前 padding 不支持容器查询单位，所以更实用的是：用 JS 读取父高，设为 CSS 变量，再在 calc 中使用：element.style.setProperty('--parent-height', parent.offsetHeight + 'px');padding-top: calc(var(--parent-height) * 0.2);
替代方案：不用 padding-top，改用其他布局方式
很多时候你以为要靠 padding-top 实现“顶部留空”，其实有更语义化、更可控的方式：
立即学习“前端免费学习笔记（深入）”；
- 用
margin-top—— 它同样按父宽算百分比，但若目标是“与兄弟元素间距”，直接写margin-top: 2rem或em更稳定 - 用
grid / flex布局控制对齐，例如：align-items: start+gap或justify-content: space-between - 用伪元素占位：
&::before { content: ''; display: block; height: 20%; }（注意：伪元素高度百分比也按父宽算，但可配合position: absolute+top精确控制）
基本上就这些。核心记住一点：padding-top 百分比“没错”，只是它不按你直觉的“高度”算。理解规则，再选对工具——calc、JS 注入变量、或干脆换布局思路，问题就解了。
