百分比 padding 合法且统一以父容器宽度为基准计算，常用于响应式宽高比；需配合 position: relative、height: 0 和绝对定位内容实现，aspect-ratio 可替代但兼容性有限。

百分比 padding 完全合法，但只认父容器宽度

可以，padding 支持百分比值，且所有方向（padding-top、padding-bottom、padding-left、padding-right）的百分比都**统一以父容器的宽度为基准计算**，和父容器高度无关。

• 父宽 400px，子元素设 padding: 10% → 四边各 40px
• 父宽 200px，子元素设 padding-top: 25% → 实际是 50px，哪怕父高只有 80px 也不影响
• 这个行为是 CSS 规范强制定义的，不是浏览器 bug，也无需 polyfill

为什么用 padding-bottom 撑高度？

因为 padding 百分比不依赖高度，却能“占位”，所以常被用来替代 height 实现响应式宽高比。核心技巧是：让 padding-bottom “撑开”容器高度，再用绝对定位把内容塞进去。

• padding-bottom: 56.25% 对应 16:9（9 ÷ 16 = 0.5625）
• padding-bottom: 75% 对应 4:3（3 ÷ 4 = 0.75）
• 外层必须设 position: relative 和 height: 0，否则 padding 会叠加在原有高度上，比例就乱了

常见翻车现场：这些地方一写就失效

看似简单，实操中几个条件缺一不可，漏掉任意一个都会导致比例崩溃或内容消失：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 父容器没明确 width（比如 flex 项未设 flex-basis 或 width），百分比将基于内容宽度动态计算，结果不可控
• 内层内容没加 position: absolute，或忘了 top: 0; left: 0; width: 100%; height: 100%，内容会塌陷或溢出
• 父容器本身设置了固定 height，会覆盖 padding 带来的高度，直接破坏比例
• 在某些 grid 容器中，若父项设了 align-items: start 等，可能干扰子项的绝对定位定位上下文

现代替代方案：aspect-ratio 能不用百分比 padding 吗？

可以，aspect-ratio: 16 / 9 是更直观的新标准，但兼容性有缺口：Chrome 88+、Firefox 89+、Safari 15.4+ 支持，IE 和旧版 Android WebView 不支持。

立即学习“前端免费学习笔记（深入）”；

• 如果项目需兼容 iOS 15.3 及更早、或 Android 4.x 设备，百分比 padding 仍是唯一可靠选择
• 两者可共存：aspect-ratio 写在前面，百分比 padding 降级兜底，CSS 会忽略不识别的属性
• 注意：百分比 padding 方案中，padding-bottom 的值必须严格按“高÷宽”计算，小数点后两位足够，别四舍五入成 56% 或 57%

实际最难把握的，不是怎么写，而是判断该不该用——当容器需要自适应缩放又必须保持比例，且不能靠 JS 测量时，百分比 padding 就不是技巧，而是必要手段。