行内元素的padding-top并非无效，而是仅在行框内绘制却不撑开空间；改用display:inline-block可使其完全生效，但需注意vertical-align、line-height及父容器间隙问题。
它不是无效，是“不撑开空间”——值写了、渲染了，但不会推高行框、不会影响周围元素位置。
padding-top 在 inline 元素上到底发生了什么
浏览器确实应用了 padding-top，但它只在行框（line box）内部向上“绘制”，不参与布局计算：
- 不会增加父容器高度
- 不会抬高相邻行的位置
- 不会改变
line-height或行框高度 - 用开发者工具看，
padding-top值存在，但盒模型视图里该区域无背景色、常被裁剪或重叠 -
padding-left/padding-right正常生效，因为水平方向天然支持内边距扩展
display: inline-block 是最常用且可靠的解法
它保留元素在当前行内的流式位置，同时让 padding、margin、width、height 全部真正参与布局：
- 必须显式设置
vertical-align，否则默认baseline会导致底部出现约 4px 空隙 - 推荐设为
vertical-align: middle或top，比依赖基线更可控 - 父容器若有换行符或空格，会渲染出间隙；可用
font-size: 0消除，再在子元素中重置font-size - 示例：
.tag { display: inline-block; padding: 6px 12px; background: #e0e0e0; vertical-align: middle; }
为什么 display: block 不推荐（除非真要换行）
display: block 确实让所有 padding 完全生效，但副作用明显：
立即学习“前端免费学习笔记（深入）”；
- 强制独占一行，破坏原有文本流——比如段落中一个
<span></span>会把后面文字挤到下一行 - 多个
block元素竖直堆叠，需额外加float或嵌套flex才能恢复并排 - 若父容器是
flex，子项设display: block后仍可能因align-items行为导致视觉错位
别踩这些隐性坑
即使用了 inline-block，以下细节仍容易被忽略：
-
line-height设在父容器上时，依然会影响inline-block元素的垂直对齐参考位置 -
font-size: 0的 hack 会让子元素的em单位失效，慎用于含动态字号的场景 - 在
flex容器中，子项是inline时，padding-top不撑高父容器——解决方式仍是改子项为inline-block，而非调flex属性 - 替换元素（如
<img alt="为什么CSS中给行内元素inline设置padding-top无效？" >、<input>）本就支持垂直padding和margin，无需改display
真正难的不是加一句 display: inline-block，而是加完之后，它和周围文字、行高、基线之间的对齐关系突然变得微妙——这些才是调试时最耗时间的地方。
