padding-left等单侧属性独立生效，不重置其他边；逻辑属性padding-inline-start/end适配RTL；负值无效；需注意box-sizing和层叠规则。
padding-left / padding-right / padding-top / padding-bottom 各自只影响单侧
CSS 的 padding 简写属性确实方便，但一旦需要单独调整某一边，就必须用对应的单侧属性——padding-left、padding-right、padding-top 或 padding-bottom。它们互不干扰，设置其中一个不会重置其他边的值。
常见错误是以为写了 padding-left: 20px 就“默认其他边为 0”，其实不是：原有 padding: 10px 或 padding: 5px 15px 依然生效，最终表现为叠加或浏览器按层叠规则取值（实际是单侧属性优先级更高，会覆盖简写中对应位置的值）。
- 如果元素已有
padding: 10px 12px（即上下 10px、左右 12px），再加padding-left: 24px，最终左内边距是 24px，右仍是 12px，上下仍是 10px - 想彻底清除其他边？得显式设为
padding-top: 0、padding-right: 0等，不能依赖“没写就等于 0” - 注意单位：支持
px、em、rem、%（百分比基于包含块宽度，仅对 left/right 有效；top/bottom 百分比也基于宽度，不是高度）
padding-inline-start 和 padding-inline-end 更适合逻辑方向
当项目需要支持 RTL（如阿拉伯语、希伯来语）或未来可能切换文本方向时，硬写 padding-left 会有问题：在 RTL 下，“左”视觉位置其实是内容末尾。此时该用逻辑属性：padding-inline-start 表示内容起始侧（LTR 下 = left，RTL 下 = right），padding-inline-end 表示结束侧。
兼容性要注意：Chrome 69+、Firefox 63+、Safari 15.4+ 支持；IE 完全不支持，Edge 18 及更早也不支持。
立即学习“前端免费学习笔记（深入）”；
- 替代方案：用
@supports (padding-inline-start: 0)做渐进增强，降级回padding-left/padding-right - 不要混用：比如同时写
padding-left和padding-inline-start，后者会覆盖前者（同优先级下，逻辑属性胜出） - 和
direction或dir属性联动才生效；单独设padding-inline-start但容器direction: ltr没变，效果等同于padding-left
padding 设置为负值无效，别试了
padding 的所有单侧属性都不接受负值。写 padding-left: -10px 不会把内容“拉出”边框，浏览器直接忽略该声明（DevTools 里会标为 strike-through）。
如果目标是让内容看起来“超出”内边距区域，正确做法是：
- 用
margin-left: -10px把整个元素左移（注意可能影响布局流） - 或用
transform: translateX(-10px)做视觉偏移（不影响文档流，但可能触发新层叠上下文） - 极少数场景需“透出”父容器，考虑
overflow: visible配合定位，而非动 padding
flex 或 grid 子项的 padding 受 align-items / justify-content 影响小，但有例外
在 flex 容器中，子项的 padding-left 等照常生效，不会被 align-items 或 justify-content 覆盖。但一个容易被忽略的边界情况是：当子项设置了 margin: auto（比如居中），padding 仍存在，但视觉上可能被 margin “挤”得不明显。
另一个坑是 box-sizing：默认 box-sizing: content-box，padding 会撑大元素尺寸；若设为 border-box，padding 就从 width/height 里扣，这时候改 padding-left 可能导致内容区变窄，尤其在固定宽高的 flex 子项里要小心。
- flex 子项若设了
flex: 0 0 auto（不伸缩），padding 改变不影响整体布局；但若flex: 1，padding 增大会间接减少可用 content 区域 - grid 子项同理，padding 属于自身盒模型，不影响网格线位置，但会影响内部内容对齐基准点
