百分比padding始终以父容器宽度为基准，与自身尺寸无关；box-sizing: border-box不改变padding计算逻辑；简写漏值会按顺时针规则复用；撑空元素时需注意父容器min-height限制。
padding值写成百分比时，基准是父容器宽度
很多人以为padding: 10%是相对于元素自身宽高，结果在响应式布局里padding忽大忽小，甚至把内容挤出可视区。其实CSS规范明确：所有方向的百分比padding（包括padding-top、padding-bottom）都以**父元素的width为基准**，和自身尺寸无关。
- 想让上下padding随高度变化？得用
padding-top: calc(10vh)或JavaScript动态计算 -
padding-bottom: 5%在窄屏下可能小到看不见，宽屏下却撑开大片空白——检查父容器width是否意外拉伸 - Flex/Grid容器中，子项的百分比padding仍按父容器算，不是按flex item自身尺寸
padding和border-box混用时，容易多加一层内边距
设了box-sizing: border-box后，width包含padding和border，但很多人忘了：这个设置**不改变padding本身的计算逻辑**，只是改变了width/height如何分配空间。常见错误是既用border-box，又手动给padding加冗余值，导致内容区域被压缩。
- 典型误操作：
width: 200px; padding: 20px; box-sizing: border-box→ 内容区只剩160px宽，但你以为“反正box-sizing管着呢”就忽略了实际可用空间 - 调试技巧：在DevTools里选中元素，看Computed面板里的
content-box width和border-box width差值，确认padding是否真的吃掉了预期空间 - 如果用CSS自定义属性控制padding，比如
--pad: 16px，记得所有依赖它的尺寸（如max-width减去两倍padding）要同步调整
padding简写漏写值，会意外复用上侧值
padding简写规则是“顺时针”：padding: top right bottom left，但少写值时不是报错，而是按规则复用——这在快速改样式时极易埋坑。
-
padding: 10px 20px→ top/bottom=10px，left/right=20px（没问题） -
padding: 10px 20px 30px→ top=10px, right=20px, bottom=30px, left=20px（常被忽略！） -
padding: 10px→ 四边全是10px（安全，但别假设它永远如此） - 用PostCSS或VS Code插件开启
stylelint，规则shorthand-property-no-redundant-values能提前标出可疑简写
用padding撑开空元素时，注意父容器min-height干扰
常见做法：给空<div></div>加padding-top: 100px代替height: 100px，避免内容为空时塌陷。但若父容器设了min-height: 0（比如Flex子项默认行为），padding可能被截断或失效。
- Flex容器中，子项默认
min-height: auto，padding能正常撑开；但加了min-height: 0后，padding就不再参与高度计算 - Grid布局中，
align-items: start+ 空元素+padding，有时padding-bottom不生效——换用grid-row: span 2或显式min-height更稳 - 真正需要“仅靠padding撑开”的场景，优先检查父容器的
min-height和overflow是否隐式限制了渲染范围
padding看着简单，但每个值背后都连着盒模型、父容器约束、布局上下文三重判断。调的时候别只盯元素本身，多点两下父级Computed样式，往往问题就出在那儿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
