padding没效果的首要原因是box-sizing被设为border-box导致padding从width中挤占空间，其次inline元素上下padding无效，以及父容器高度塌陷、样式覆盖等。
padding 值写对了但没效果，先查盒模型是否被重置
最常见的原因是元素使用了 box-sizing: border-box，但开发者误以为 padding 会“撑开”容器宽度——其实它只是从已设的 width 里“挤占空间”，视觉上看起来像没变。
- 默认
box-sizing是content-box：width只算内容区，padding和border会额外加在外部 - 全局重置常用
* { box-sizing: border-box; }：此时width: 200px; padding: 20px;的实际内容宽只有160px - 用浏览器开发者工具检查元素的 computed 样式，重点看
box-sizing和width的最终解析值
内边距对 inline 元素无效
padding 对 display: inline 元素（如 <span></span>、<a></a> 默认状态）的上下方向（padding-top/padding-bottom）不产生布局影响，只影响背景和行高视觉区域。
- 解决办法：改
display类型，例如display: inline-block或display: inline-flex - 注意
inline-block会保留换行符产生的空白间隙，必要时需处理 HTML 中的空格或用font-size: 0抑制 - 若只需“看起来有上下间距”，可改用
line-height或margin（但margin对 inline 元素上下依然无效）
父容器高度塌陷导致 padding “消失”
当块级子元素浮动（float: left/right）或使用 position: absolute 脱离文档流，父容器可能高度为 0，此时即使设置了 padding，也因无高度而不可见。
- 验证方式：给父容器加
background-color，看是否显示为一条细线或完全不显色 - 修复手段（任选其一）：
- 父容器加
overflow: hidden或overflow: auto - 父容器末尾加清除浮动的伪元素：
::after { content: ""; display: table; clear: both; } - 改用
display: flex或display: grid布局，天然避免塌陷
- 父容器加
padding 被其他样式覆盖或继承干扰
检查是否被更具体的 CSS 选择器重写，或存在 inherit、unset、revert 等继承值干扰。
立即学习“前端免费学习笔记（深入）”；
- 在开发者工具中查看
padding属性旁是否有横线（表示被覆盖），点击右侧箭头展开层叠来源 - 注意简写属性覆盖：比如
padding: 10px 20px;会同时重置padding-top和padding-bottom，若之前单独设过padding-top: 30px;就会被覆盖 - 慎用
all: unset或all: revert，它们会把padding也清掉
.card {
width: 300px;
padding: 20px;
background: #f5f5f5;
}
/* 如果 .card 内部全是 float 元素，这里 padding 会“看不见” */
.card::after {
content: "";
display: table;
clear: both;
}盒模型和 display 类型是 padding 失效最常被忽略的两个底层原因，调试时优先确认这两项，比反复调数值更省时间。
