padding百分比值统一基于父容器宽度计算，与高度无关；适用于水平等比缩放布局，不适用于垂直居中；父宽为auto时仍有效，但需防塌陷；替代方案包括vh、calc()配合自定义属性或伪元素。
padding 百分比值是相对于父容器宽度计算的
很多人以为 padding 百分比会按父元素高度算，结果上下内边距“不生效”或比例怪异——其实 CSS 规范里明确写了：padding-top、padding-bottom、padding-left、padding-right 的百分比值，**全部基于父元素的 width 计算**，和父元素 height 无关。
这意味着：即使父容器高度远大于宽度，padding-top: 20% 依然等于 父容器 width × 0.2，不是 height 的 20%。
- 适用于需要水平等比缩放内边距的响应式布局（比如卡片内边距随屏幕变宽而增大）
- 不适用于“让内容垂直居中撑开”的场景——别用
padding-top: 50%模拟垂直居中，它依赖 width，很可能把盒子拉得极宽又极矮 - 如果父容器 width 是 auto（比如未设宽的
div在文档流中），百分比 padding 仍有效，按其实际渲染宽度计算
vertical-align 不影响 padding 百分比行为
有人在 inline-block 容器里试 padding-bottom: 30%，发现效果飘忽，怀疑是 vertical-align 干扰——其实不是。vertical-align 只影响行内级元素的基线对齐，而 padding 百分比的计算基准始终是父容器的 width，与对齐方式无关。
真正导致“看起来不对”的常见原因：
- 父容器没有设定
width，但内部有浮动/绝对定位子元素，造成父容器 width 塌陷为 0 → 百分比 padding 全变成 0 - 父容器是 flex item 且未设
flex-basis或width，其 width 表现受 flex 分配逻辑影响，padding 计算值随之波动 - 用了
box-sizing: border-box，但误以为 padding 百分比会“压缩”内容区——它只是数值上按 width 算，最终效果仍叠加在盒模型上
想让 padding 随高度变化？换思路，别硬扛百分比
CSS 标准里没有 “padding-bottom: 20vh” 以外的“相对高度”内边距语法。如果你真需要 padding 随父容器高度动态变化（比如全屏弹窗内边距随视口高缩放），有更靠谱的替代方案：
- 用
vh单位：如padding: 5vh，直接基于视口高度，但注意它不随父容器高度变，而是固定随 viewport 变 - 用
calc()+ CSS 自定义属性：父容器通过 JS 监听 resize 写入--parent-height，再写padding-top: calc(var(--parent-height) * 0.1)——但需配合style属性或 CSS Houdini，原生支持有限 - 放弃 padding，改用 margin 或伪元素占位：比如用
::before设padding-top: 20%（此时它仍是按父 width 算），再用position: absolute拉出高度感——这属于 hack，只在特定结构下可控
Flex / Grid 容器里的 padding 百分比照常工作，但要注意嵌套层级
在 display: flex 或 display: grid 的父容器里，子元素的 padding 百分比依然按该父容器的 width 计算，不受 flex/grid 自身尺寸分配规则干扰。但容易踩坑的是：你可能把百分比写在了 flex item 上，却忘了它的父容器其实是 flex 容器，而 flex 容器的 width 可能由内容撑开或被约束。
- 检查父容器是否设置了
width或max-width，否则它的 width 可能窄于预期，导致 padding 小得看不见 - 避免在多层嵌套 flex 中连续使用百分比 padding：每层都按直接父级 width 算，容易出现“越往里 padding 越小”的意外衰减
- Grid item 的
padding百分比也一样——它不按所在 grid area 的尺寸算，还是按 grid container 的 width
CSS 的 padding 百分比机制简单粗暴，但正因为太“死板”，反而要求你必须清楚每一层父容器的 width 来源。一旦父宽是 JS 动态改的、或由 content 决定、或被 flex/gird 压缩过，padding 就会跟着“意外缩放”。盯着 computed style 里的 padding 像素值看，比猜逻辑更管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
