padding四值顺序固定为上右下左顺时针；百分比值均按父元素宽度计算；box-sizing: border-box是控尺寸前提；单边属性适用于动态控制且兼容ie9+。
padding 四值写法：上右下左顺序不能错
直接说结论：padding: 10px 20px 30px 40px 的顺序是固定的——上、右、下、左，顺时针。写反了（比如误以为是“上下左右”）会导致视觉错位，尤其在卡片、表单等对称布局中特别明显。
- 常见错误现象：设置了
padding: 20px 10px后发现左右太窄、上下太松，其实是把“上下=20px、左右=10px”的逻辑记混成“左右=20px” - 三值写法
padding: 10px 20px 30px中，第二个值同时作用于左右，不是“右+左分别设”，而是统一设；很多人误以为能单独控右不留左 - 调试建议：用浏览器开发者工具 hover 查看盒模型高亮区域，一眼就能看出哪边 padding 生效了
单边设置：什么时候必须用 padding-top 而非简写？
当你要动态控制某一边（比如响应式下只加大底部留白、JS 控制展开动画的顶部内边距），就必须用单边属性——简写会覆盖其他方向，破坏已有布局。
- 使用场景：按钮悬停时仅增加
padding-bottom制造下沉感；移动端折叠菜单展开时渐进增加padding-top - 兼容性注意：
padding-top等单边属性在所有现代浏览器和 IE9+ 都没问题，但别在 IE8 及更早版本里指望它生效 - 性能影响极小，但频繁 JS 修改多个单边属性（如连续改
padding-top和padding-bottom）可能触发重排，不如一次性改简写
百分比 padding 的坑：上下边距也按父宽算
padding: 5% 10% 的上下边距，不是按自身高度或父元素高度，而是**严格按父元素的 width 计算**——这是最常被忽略的设计陷阱。
- 典型问题：一个全屏
div宽度 100vw，padding-top: 20%实际是 20vw，可能远超内容高度，造成大片空白 - 安全替代：想实现“等比留白”，优先用
aspect-ratio+ 内容容器，或用padding-bottom配合绝对定位做占位（经典“padding-bottom hack”） - 行内元素要注意：
span设padding: 5%会生效，但上下 padding 不影响行高，只撑开背景区域
box-sizing: border-box 是 padding 不失控的前提
默认 box-sizing: content-box 下，width: 200px; padding: 10px; 会让元素实际占宽 220px——这在栅格系统、固定宽度输入框里极易导致换行或溢出。
立即学习“前端免费学习笔记（深入）”；
- 必加规则：所有需要精确控制尺寸的组件（
input、button、.card）都应前置box-sizing: border-box - 全局写法推荐：
* { box-sizing: border-box; }，但注意它不继承，需确保伪元素也覆盖（可加*::before, *::after） - 例外情况：极少数需要 content-box 行为的图形计算场景（如 canvas 布局），但日常开发几乎遇不到
padding 看似简单，真正卡住人的永远是“它悄悄改变了元素的实际尺寸”和“百分比参照系反直觉”。动手前先看一眼盒模型面板，比查文档快得多。
