padding 百分比始终基于父元素内容区宽度计算，与方向及高度无关，这是为避免布局循环依赖而由 CSS2.1 确立的规范。
padding 百分比永远基于父元素的宽度计算，与方向无关，也与自身或父元素的高度无关。
为什么 padding-top 用的是父宽而不是父高？
CSS 规范强制规定：所有方向的 padding（padding-top、padding-bottom、padding-left、padding-right）的百分比值，都以包含块（通常是父元素）的**内容区宽度**为基准。这不是 bug，而是为避免循环依赖——如果 padding-top: 50% 按父高算，而父高又依赖子元素撑开，就会陷入“先有鸡还是先有蛋”的布局死锁。
- 父元素宽度是确定的（比如
width: 400px），计算无歧义 - 父元素高度常常是自动的（
height: auto），无法作为可靠基准 - 这个规则从 CSS2.1 就确立，所有现代浏览器一致遵循
常见错误现象与调试技巧
开发者常因直觉误判而踩坑，典型表现包括：
- 给一个
height: 200px的父容器设padding-top: 30%，结果内边距不是 60px，而是按父宽（比如 300px）算出的 90px - 响应式页面中，横向缩放时上下 padding 突然变大/变小，误以为是 height 响应出了问题
- 用
padding-bottom: 56.25%做 16:9 容器，但父容器宽度没设（如width: 100%或固定值），导致比例失效
调试建议：outline: 1px solid red 包裹子元素，再用开发者工具看 computed padding 值，直接对照父元素的 width 计算验证。
立即学习“前端免费学习笔记（深入）”；
实际能用它做什么？
这个“反直觉”规则恰恰是几个关键响应式技巧的底层支撑：
-
保持宽高比容器：利用
padding-top占位，配合position: absolute内容，实现视频框、卡片等自适应比例结构 -
垂直方向动态留白：当父容器宽度随视口变化时，上下 padding 自动缩放，比固定
px更自然 -
简化栅格内边距逻辑：在 flex/grid 容器中统一用百分比 padding 控制子项间距，避免为不同断点写多套
px值
<style>
.aspect-16x9 {
width: 100%;
padding-top: 56.25%; /* 9 ÷ 16 = 0.5625 */
position: relative;
}
.aspect-16x9 > * {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
}
</style>box-sizing 会影响 padding 百分比的计算吗？
不会。box-sizing 只改变 padding 是否计入 width/height 的最终尺寸，**不改变百分比的计算基准**。
-
box-sizing: content-box（默认）：padding: 10%是父宽的 10%，且会额外增加元素总宽高 -
box-sizing: border-box：padding: 10%还是父宽的 10%，但它会从你声明的width里“扣出”这部分空间，内容区自动收缩
也就是说，百分比计算和盒模型是两条独立的规则线——前者管“算多少”，后者管“往哪放”。容易忽略的是：即使用了 border-box，padding 的数值本身仍由父宽决定，不是由你写的 width 决定。
