padding简写必须按「上 右 下 左」顺时针顺序书写，1值统四边、2值上下/左右、3值上/左右/下、4值严格对应；漏写会触发自动补全而非留空默认，易引发误读和布局错乱。
padding简写语法怎么写才不踩坑
直接说结论：padding 简写必须按「上 右 下 左」顺时针顺序写，漏掉某个值会触发自动补全规则，不是“留空就用默认值”，而是彻底改变计算逻辑。
常见错误现象：padding: 10px 20px; 被误以为是「上下10、左右20」——其实它确实是，但有人接着写成 padding: 10px 20px 0;，以为「下边距为0，左边还是20」，结果左边被自动补为20，和右边一样；而 padding: 10px 20px 0 5px; 才真正控制四边独立。
-
padding: 10px;→ 四边都是10px -
padding: 10px 20px;→ 上/下=10px，左/右=20px -
padding: 10px 20px 30px;→ 上=10px，左/右=20px，下=30px（左=右，上≠下） -
padding: 10px 20px 30px 40px;→ 严格按上右下左顺序
什么时候不该用padding简写
当需要响应式微调某一边（比如只在小屏下收缩右边距），或配合box-sizing: border-box做像素级对齐时，简写反而增加维护成本。
使用场景：组件库中按钮、卡片等标准化容器常用简写；但表单控件、弹窗内嵌布局、与图标紧邻的文字块，建议拆开写padding-top、padding-left等，避免牵一发而动全身。
立即学习“前端免费学习笔记（深入）”；
- 动画中修改
padding时，简写会导致浏览器重算全部四边，拆开写可只触发布局变化更小的单边 - 和
margin混用时，如果margin用了简写而padding没用，视觉节奏容易错乱 - 多人协作项目里，
padding: 8px 12px 8px;这种三值写法常被新成员误读为「左=12，右=8」
padding值为0时要不要写单位
要写，但可以不写单位——0 是唯一允许省略单位的长度值，padding: 0;、padding: 0px;、padding: 0em; 效果完全一致，且无兼容性问题。
但注意：这不是偷懒的理由。如果同一组样式中其他padding带单位（如padding: 4px 8px;），单独写padding-top: 0;比padding-top: 0px;更统一，也更符合CSS书写惯例。
- 不要写
padding: 0rem;或padding: 0%;——语义错误，0%在某些老浏览器中可能触发意外行为 - 预处理器（如Sass）里用变量时，
$base-padding: 0;比$base-padding: 0px;更安全，避免单位拼接出错
padding和box-sizing的关系影响实际尺寸
默认box-sizing: content-box下，padding会让元素总宽高「变大」；设成border-box后，padding从width/height里「扣减」，这才是微调内边距时真正可控的前提。
性能影响很小，但兼容性要注意：IE8+ 支持border-box，但若项目还需支持IE7，就不能依赖它来反推padding效果。
- 全局重置推荐加：
* { box-sizing: border-box; }，否则单个元素设border-box可能和父容器计算方式冲突 - Flex/Grid容器子项即使设了
padding，只要没设min-width，仍可能被压缩——这时padding只是“撑开内容区”，不保底 -
padding设百分比值（如padding-left: 5%;）是相对于父容器宽度计算的，不是自身宽度，容易在响应式中断层
最常被忽略的是：当父容器有overflow: hidden，而子元素padding过大又没预留空间时，文字或图标会被截断，看不出是padding导致的——得检查computed styles里的actual padding值，而不是只看声明。
