行内元素的 padding-top/padding-bottom 不撑开空间是 css 规范行为，因其不生成独立盒模型；改用 display: inline-block 或 inline-flex 可解决，但需注意 vertical-align、line-height 和间隙问题。
给 span、a、strong 这类行内元素设 padding-top 或 padding-bottom，看起来“没反应”，不是写错了，也不是浏览器 bug——是 CSS 规范明确规定的盒模型行为。
为什么上下 padding 在 inline 元素上不撑开空间
行内元素只参与「行框（line box）」布局，不生成独立的块级盒模型。它的 padding-top 和 padding-bottom 确实被解析、甚至在开发者工具里能看到值，但不会影响行高计算，也不会推开相邻元素或撑大父容器。
- 用
background-color可验证：上下 padding 区域无背景色，说明未渲染为可占位空间 - 左右
padding通常可见，但可能被父容器裁剪或与其他行内元素重叠 -
line-height才是真正控制垂直视觉间距的属性，它作用于整个行框，而非单个 inline 元素
display: inline-block 是最稳妥的修复方式
把 display 改成 inline-block 后，元素既保留在当前行内流中（不换行），又获得完整盒模型：所有 padding、margin、width、height 全部生效。
- 兼容性极好，IE8+ 均支持
- 注意默认
vertical-align: baseline，多个inline-block元素容易因基线对齐产生意料外的底部空白，建议显式设vertical-align: middle或top - HTML 换行/空格会在多个
inline-block元素间产生约 4px 间隙，可用font-size: 0在父容器上清除，再在子元素里重置font-size
示例：
.tag { display: inline-block; padding: 4px 8px; background: #eee; border-radius: 3px; vertical-align: middle; }
inline-flex 更适合需要内部对齐的场景
当你要在行内容器里居中图标+文字、控制子项间距，或希望 padding 行为更稳定时，display: inline-flex 比 inline-block 更可控——它自带 flex 上下文，无需额外包裹。
- 子元素自动成为 flex item，
vertical-align失效，需用align-items控制对齐 -
text-align: center对 inline-flex 容器无效，得用justify-content: center - 兼容性略低：IE10+，现代项目基本无压力
示例：
a.btn { display: inline-flex; align-items: center; padding: 6px 12px; gap: 4px; }
别忽略 vertical-align 和 line-height 的隐性干扰
即使加了 inline-block，仍可能因 vertical-align 默认值或父级 line-height 导致视觉错位。比如父容器设了 line-height: 2，会改变 inline-block 元素的垂直对齐参考线；而 font-size: 0 清间隙的 hack 会让子元素的 em 单位失效。
这些细节不报错、不警告，但会让 padding 的实际视觉效果和预期偏差明显——最容易被跳过检查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
