行内元素的 padding-top/padding-bottom 确实生效，但不撑开父容器高度、不影响行高和行框高度，仅在行框内绘制；推荐用 display: inline-block 解决。
行内元素的 padding-top / padding-bottom 看似不生效？其实是生效了
它确实生效了，但不会撑开父容器高度，也不会影响其他行内元素的垂直排版位置——这是由 display: inline 的盒模型渲染规则决定的，不是 bug，是规范行为。
为什么 padding-top/bottom 对 <span>、<a> 这类元素“没效果”
根本原因是：行内元素的上下 padding 和 margin 不参与行高（line-height）计算，也不改变行框（line box）的高度。它们只是「画在行框内部」，可能被上一行或下一行内容覆盖，视觉上像没起作用。
-
padding-top会从内容区向上延伸，但若父容器line-height不够，就会被裁剪或重叠 - 上下
padding不会推动相邻行的位置，所以不会“拉开行距” - 左右
padding正常生效，因为行内元素水平方向天然支持内边距扩展
怎么让上下 padding 可见且可控
有三个可靠解法，按推荐顺序排列：
- 把元素改为
display: inline-block—— 最轻量，保留行内流特性，同时获得完整盒模型控制权 - 改用
display: inline-flex或display: inline-grid（需确认浏览器兼容性） - 强行用
vertical-align: top/middle/bottom配合line-height调整对齐基准线，但治标不治本，易受字体、字号干扰
span.highlight {
display: inline-block;
padding: 8px 12px;
background: #ffeb3b;
}
容易忽略的关键细节
即使加了 inline-block，仍要注意：vertical-align 默认是 baseline，可能导致元素底部和文字基线对不齐，产生意料外的空白；line-height 设置在父容器上时，依然会影响 inline-block 元素的垂直对齐参考位置；另外，font-size: 0 在父级清空间隙的 hack 会影响 inline-block 子元素的 em 单位计算。
立即学习“前端免费学习笔记（深入）”；
