padding无效常见于选择器未命中、inline元素不支持上下padding、固定高容器裁剪；需注意box-sizing、单位混用、可访问性及动画性能问题。
padding值写法不对，元素没反应
常见现象是写了 padding: 10px 却发现上下左右都没变化，或者只有一边生效。根本原因通常是选择器没命中目标元素，或该元素被设为 display: inline（内联元素不支持上下 padding）。另外，如果父容器高度固定且子元素用了 padding-top，可能触发溢出或被裁剪，看起来像“没生效”。
-
padding只作用于block、inline-block、flex、grid等盒模型支持的元素，inline元素仅左右 padding 有效 - 简写顺序是上 → 右 → 下 → 左，
padding: 10px 20px表示上下 10px、左右 20px；padding: 10px 20px 30px是上/右下/左，不是“上右下” - 百分比值以**包含块宽度**为基准（即使写在
padding-top），不是高度——这点极易误解
想让padding响应式但用em或rem算不准
用 em 写 padding 时，值会继承父元素字体大小，嵌套深了容易失控；用 rem 虽稳定，但和文字大小解耦后，视觉节奏可能断裂。比如按钮内边距用 0.5rem，在小屏下可能缩得太紧，大屏又太松。
- 优先用
px或vh/vw做基础控制，再配合媒体查询微调：@media (max-width: 768px) { button { padding: 8px 16px; } } - 需要真正响应式比例，可用
clamp()：padding: clamp(8px, 2vw, 16px)，但注意 Safari 13.4+ 才稳定支持 - 避免在
padding里混用单位（如padding: 1em 10px），计算逻辑不同步，调试困难
padding导致盒子变大，布局错位
默认 box-sizing: content-box，此时 width: 200px; padding: 20px 的实际占位是 240px 宽——很多人忘了这点，结果卡片并排时换行、表单控件挤出容器。
- 全局重置推荐加：
* { box-sizing: border-box; }，所有元素 padding 不再撑宽 - 若不能改全局，对关键组件单独设：
.card { box-sizing: border-box; width: 100%; padding: 20px; } - Flex/Grid 容器中，
padding不影响子项排列逻辑，但会影响容器自身尺寸和对齐基准线，尤其用align-items: center时要注意
用padding做“伪内容区”却引发可访问性问题
有人用 padding-left 代替左侧图标或装饰元素，以为省事，结果屏幕阅读器无法识别这个“空隙”是内容的一部分，键盘焦点跳过时也缺乏视觉提示，违反 WCAG 1.4.10（重听）原则。
立即学习“前端免费学习笔记（深入）”；
- 纯装饰性留白用
padding没问题；但凡承担信息传达、层级暗示、交互引导作用的“空白”，应由真实 HTML 结构或::before/::after伪元素承载 - 例如导航菜单项左侧间距若用于区分主次，建议用
margin分隔，而非靠padding“撑开”单个项 - 动画中修改
padding性能较差（触发布局重排），优先考虑transform或margin（后者仍需权衡）
事情说清了就结束
