padding百分比始终基于父元素宽度计算，无论top/bottom/left/right，均按父容器内容区宽度而非高度或子元素尺寸计算，这是为避免布局循环依赖的CSS规范强制行为。
padding 百分比始终基于父元素宽度计算
不管你写的是 padding-top: 20% 还是 padding-bottom: 15%，这个百分比永远不是看子元素自己、也不是看父元素高度，而是**严格按父元素内容区的宽度（即 width）来算**。比如父容器宽 400px，那么 padding-top: 25% 就是 100px，哪怕父容器高只有 50px 或子元素高度为 0，也照算不误。
- 这是 CSS 规范强制定义的行为，不是浏览器“bug”或兼容性问题
- 目的很实在：避免循环依赖——如果
padding-top依赖自身高度，而自身高度又受padding影响，浏览器根本没法收敛布局 - 所有方向（top/right/bottom/left）一视同仁，没有例外
为什么 padding-top 会随屏幕变宽而变高？
因为它的计算基准是父容器宽度，而响应式页面中父容器宽度常随视口变化（比如用 max-width: 100% 或 width: 100vw）。所以当你拉宽浏览器窗口，父容器变宽 → padding-top: 10% 对应的像素值就变大 → 元素“看起来被顶高了”。
- 这不是错觉，是设计使然；它让垂直间距能天然跟随横向布局缩放
- 常见于卡片留白、标题区域呼吸感控制：
.hero { padding-top: 12%; }在手机上是24px，在桌面端变成96px - 若你想要“真正按高度缩放”的垂直内边距，得换方案：比如用
vh单位、或 JS 动态计算
用 padding 百分比做等比例容器的原理
这是该规则最经典的实战应用：利用 padding-bottom（或 padding-top）制造“无内容却占高”的空间，再配合 position: absolute 把内容塞进去，从而实现宽高比锁定（如 16:9 视频框）。
.aspect-ratio-16x9 {
position: relative;
width: 100%;
/* 关键：用 padding-bottom 模拟高度 */
padding-bottom: 56.25%; /* 9 ÷ 16 = 0.5625 */
}
.aspect-ratio-16x9 > * {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}- 这里
padding-bottom: 56.25%是按父容器宽度算的，所以只要父容器宽度变，这个“高度”就自动同比例变 - 子元素用绝对定位填满整个父容器（含 padding 区域），视觉上就维持了固定宽高比
- 注意：不能给父容器设
height，否则会覆盖 padding 产生的高度
容易踩的坑：你以为的“居中”其实靠不住
新手常想用 padding-top: 50% + padding-bottom: 50% 把内容“垂直居中”，结果发现完全不对齐。原因很简单：这两个值都按父宽算，不是按父高。假如父容器宽 300px、高 600px，那 padding-top: 50% 就是 150px，padding-bottom: 50% 又是 150px，总共撑出 300px 高度，但内容实际只在中间 300px 区域里，离顶部还有 150px，根本不是居中。
立即学习“前端免费学习笔记（深入）”；
- 真要垂直居中，请用
flex、grid或transform: translateY(-50%)配合top: 50% -
padding百分比不是定位工具，它是**尺寸建模工具**，适合构建比例关系，不适合精确定位 - 调试时可临时加
outline: 1px solid red看 padding 区域真实范围，比猜靠谱得多
这个规则本身不难，难的是它和直觉冲突——你盯着一个竖向间距，却要低头去看父容器的宽度值。一旦接受“所有 padding% 都只认父宽”这个前提，很多看似诡异的布局表现，瞬间就合理了。
