padding百分比值始终参照包含块的宽度，即使用于padding-top或padding-bottom；混用单位易导致响应式布局异常，且父宽为0时百分比padding失效。
padding 百分比值的参照对象是什么
百分比 padding 不是相对于元素自身宽高，而是**始终相对于包含块（containing block）的宽度**，哪怕用在 padding-top 或 padding-bottom 上也一样。这意味着：
– 如果父容器宽度是 400px，padding: 5% 等价于 padding: 20px 四边；
– padding-top: 10% 和 padding-bottom: 10% 都会取父容器宽度的 10%，不是各自方向上的尺寸。
像素值和百分比混用时的常见错误
混用单位本身合法，但容易因参照系错乱导致布局意外。比如：
div {
padding: 10px 5% 2em 20px;
}
这行代码中：
– padding-top: 10px（绝对值）
– padding-right: 父容器宽度的 5%（相对值）
– padding-bottom: 2em（基于当前 font-size）
– padding-left: 20px（绝对值）
问题在于：同一声明里单位逻辑不统一，响应式场景下 5% 可能撑开高度，而 10px 完全不变，视觉节奏易断裂。更隐蔽的是，当父容器宽度为 0（如 flex 容器未设宽、或 display: contents 下），百分比 padding 会计算为 0，造成“消失”的内边距。
需要精确控制单边 padding 时怎么选单位
优先按场景选，不是按习惯：
