css中padding-bottom百分比始终基于父容器宽度计算，而非高度或自身尺寸，这是w3c规范强制定义的行为；例如父宽500px时padding-bottom:20%即100px，可能远超容器实际高度。
因为垂直方向的 padding-top 和 padding-bottom 百分比值，参照的是父容器的宽度，而不是高度或自身尺寸——这是 CSS 规范强制定义的行为，不是 Flex 特有的 bug。
为什么 padding-bottom: 20% 在 Flex 容器里看起来“太高”或“太低”
你写的 padding-bottom: 20%，浏览器实际计算方式是：父元素宽度 × 20%。哪怕父容器只有 100px 高、但宽度是 500px，这个内边距就是 100px，远超容器本身高度。
- Flex 容器是否设了
height或min-height，完全不影响该计算逻辑 - 子元素是
display: inline（如<label></label>、<span></span>）时，上下 padding 还可能不参与父容器高度计算，直接视觉溢出 - 即使子元素是块级，只要父容器没设明确高度，
align-items: center等对齐也会因“交叉轴无范围”而失效，进一步放大错觉
Flex 子项加 padding 后撑开容器的真正原因
默认 box-sizing: content-box 下，width: 100% + padding: 16px = 实际占用宽度为「内容区 100% + 左右 padding」；Flex 分配空间时只看基础尺寸，不自动压缩内容区来容纳内边距。
- 常见翻车点：
flex: 1子项设了padding，结果挤占相邻子项空间 -
box-sizing: border-box必须显式加在子项上，且需进 DevTools 「Computed」面板确认生效（Styles 面板看到 ≠ 真正生效） - 别用
margin模拟间隙——它会额外增加总宽度；应改用 Flex 容器的gap属性
怎么写出真正可控的垂直间距
放弃对垂直百分比 padding/margin 的幻想，改用语义清晰、参照明确的方案：
- 固定值 + 媒体查询：
--gap-sm: 0.75rem，在@media (min-width: 768px)中升级为1rem - 视口单位：
padding-top: 5vh真正响应屏幕高度变化（注意 Safari 对100vh在地址栏收起时的兼容问题） - Flex 原生
gap：给容器设gap: 1rem，子项间自动获得等距间隙，且不参与盒模型计算 - 若必须用百分比模拟比例感，配合
aspect-ratio或padding-bottom+position: absolute做占位，但仅限特定场景（如响应式图片容器）
最易被忽略的一点：gap 在旧版 Safari（≤14.1）和 IE 中不支持，兜底要用 margin 时，务必配合 :not(:first-child) 选择器，且确保子项未设 flex-basis 冲突。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
