line-height 在内联非替换元素上不直接改变自身尺寸，仅影响行框高度；需改 display 或用 vertical-align；继承的是计算值；font-size 为 0 时无单位 line-height 失效；flex 中应使用 align-items 而非 line-height。
line-height 在内联元素上不生效？检查 display 类型
HTML 标签默认的 display 类型会影响 line-height 是否起作用。比如 、、 这些内联元素，直接设 line-height 通常没反应——不是写错了，是 CSS 规范限制：内联非替换元素的 line-height 只影响其所在行框（line box）的高度计算，不改变自身尺寸。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 加
display: inline-block或display: block，让元素获得盒模型控制权 - 若需保持行内布局，改用
vertical-align配合父容器的line-height调整视觉位置 - 避免对
line-height，它本身不响应该属性
父容器 line-height 覆盖子元素？优先级和继承要分清
line-height 是可继承属性，但它的行为容易被误解：子元素若未显式声明值，会继承计算后的数值（如 1.5 或 24px），而不是继承“表达式”。一旦父容器设了 line-height: 1.6，子元素即使写了 line-height: 2，也可能因层叠顺序或 specificity 不足而失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具检查 computed 值，确认最终生效的是哪个声明
- 优先使用无单位数值（如
line-height: 1.4），避免父级像素值继承后放大/缩小失真 - 对关键文本容器（如
或）加line-height: normal重置，再单独设置font-size 为 0 时 line-height 失效？这是计算归零导致的
当元素的
font-size: 0（常见于清除 inline 元素间隙的 hack），line-height若用无单位数值（如line-height: 1.5），实际计算结果就是0 × 1.5 = 0px，行高彻底消失。此时哪怕内容有文字，也会挤成一条线甚至不可见。实操建议：
立即学习“前端免费学习笔记（深入）”；
- 禁用
font-size: 0，改用font-size: 0.01px或letter-spacing: -0.31em等更安全的间隙清除方式 - 若必须保留
font-size: 0，则line-height必须用固定单位（如line-height: 24px）绕过乘法计算 - 对图标类
，建议统一用inline-flex+align-items: center替代行高垂直居中
flex 容器里 line-height 失效？那是你没找对对齐入口
在
display: flex的容器中，line-height对子项的垂直居中基本无效——因为 flex 布局的对齐逻辑由align-items和align-self控制，与行高无关。强行设line-height可能造成文字溢出或错位。实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
align-items: center（主轴为水平时）实现整体居中 - 单行文本内部微调，可用
padding-top/padding-bottom补偿 - 需要精确控制行间距又得保持 flex 结构？把文本包一层
，对该 span 单独设line-height并确保它 display 为 block
line-height在不同 display 模式下的语义差异——它从来不是“让文字上下留白”的万能开关，而是参与行框构建的排版参数。调不动的时候，先看 computed style 里的真实值，再查 display 和 font-size，比反复改数字更省时间。 - 禁用
