line-height 比 padding 更直接控制内联元素文字垂直居中；padding 对内联元素上下边距无效，仅 line-height 决定行框高度与文字视觉位置，无单位值（如 1.5）最安全且响应式友好。
line-height 比 padding 更直接控制文字垂直居中
文字在 <span></span> 或 <a></a> 这类内联元素里上下留白不均，不是因为 padding 生效了，而是 line-height 在起作用。padding 对内联元素的上下边距实际无效（浏览器会渲染但不参与行高计算），真正撑开行框、让文字视觉居中的，是 line-height。
常见错误现象：padding-top: 8px; padding-bottom: 8px; 加在 <span></span> 上，结果上下间距还是不对，甚至和相邻文字错位。
-
line-height值设为无单位数字（如1.5）最安全，它会相对于当前字体大小计算，响应式友好 - 设为带单位值（如
24px）容易和父容器 font-size 冲突，尤其嵌套时行高可能意外叠加 - 若必须用 padding，得先把元素转成
display: inline-block或display: inline-flex，否则 padding-top/bottom 不影响布局流
inline 元素的 padding-top/bottom 为什么“看起来没用”
这不是 bug，是 CSS 规范行为：内联元素的上下 padding 会渲染，但不会推开相邻行框（line box），所以文字不会被“顶起来”，只是背景色或边框多出一块空白。
使用场景举例：给链接加背景色并希望上下有呼吸感，但又不想破坏行高节奏 —— 这时候硬加 padding-top 反而会让背景凸出、文字悬浮感变强，阅读体验反而差。
立即学习“前端免费学习笔记（深入）”；
- 检查 computed styles 会发现
padding-top确实存在，但height和line-height才决定文字所在行框高度 - 如果父容器
line-height小于子元素 padding 总和，可能出现文字被裁切（尤其小字号 + 大 padding） - 想保留内联特性又需要 padding 效果？用
display: inline-block+ 显式vertical-align: middle是最稳的组合
font-size 与 line-height 的隐性耦合关系
当 font-size 动态变化（比如响应式文字或用户系统缩放），只有无单位 line-height 能保持比例一致；写死像素值会导致小字时行高过大、大字时挤在一起。
性能影响很小，但兼容性坑不少：旧版 Safari 对 line-height: normal 渲染偏高，IE 对 line-height: 0 有异常截断，都建议避开极端值。
- 推荐起步值：
line-height: 1.4（正文）、line-height: 1.2（标题）、line-height: 1.5（按钮内文字） - 不要依赖
line-height: 0来“清除”默认间距——它会让内联元素塌陷，vertical-align也会失效 - 遇到文字底部贴底、顶部空太多？先查父级
line-height是否继承了过小/过大的值，而不是急着加 padding
vertical-align 不是“垂直居中”，而是行内对齐基准线
很多人以为 vertical-align: middle 能让文字在父容器里上下居中，其实它对齐的是父行框的 baseline（字母 x 底线），不是容器中心。这也是为什么加了 vertical-align 后，文字位置还是飘忽不定。
典型错误：给 <img alt="CSS Padding与内联高度_解决文字上下间距不均问题" > 和 <span></span> 都设 vertical-align: middle，结果因字体度量差异，文字仍比图片略低。
-
vertical-align: text-bottom或vertical-align: text-top比middle更可预测，适合严格对齐文本边缘 - 真要绝对居中？把父容器设
display: flex，子元素用align-items: center—— 别在 inline 场景里硬解 vertical-align - 注意：
vertical-align只对inline、inline-block、table-cell生效，对纯block元素无效
line-height 当成排版属性而非布局属性 —— 它直接参与行框高度计算，而 padding 在 inline 元素上只是视觉补丁。 
