line-height 可继承但“看似无效”的根本原因是父容器高度塌陷或基线错位；需先用 display: flow-root 或 clearfix 稳定父容器高度，再统一子元素 line-height 和 vertical-align。
子元素能继承 line-height，但继承后“看起来没效果”，根本原因不是继承失败，而是父容器高度塌陷或基线错位掩盖了行高作用——line-height 本身是可继承属性，它始终生效，只是你没看到。
为什么 line-height 继承了却像没起作用？
常见现象：父容器设了 line-height: 2，子元素文本也继承了，但浮动块整体高度参差、文字贴顶、背景色只显示一条线。这不是 line-height 失效，而是：
- 父容器因浮动塌陷，
height为0，导致子元素的行框虽存在，却“悬空”在父容器之外 -
line-height控制的是行框（line box）高度，不是容器高度；若容器没高度，行框再高也撑不开视觉区块 - 浮动元素默认基线对齐（baseline），当内部字体、图标、
padding不一致时，即使line-height相同，视觉上仍会高低不平
修复必须分两步：先稳住父容器高度，再统一行内表现
跳过清除浮动直接调 line-height，等于在流沙上画格子。正确顺序是：
- 给父容器加
display: flow-root（推荐）或.clearfix::after清除浮动，确保它能包裹所有浮动子元素 - 确认父容器有明确高度来源：要么内容撑开，要么设了
min-height或height（注意：height: auto不提供继承值） - 子元素统一设无单位
line-height（如line-height: 1.5），避免用px值导致字号变化时失衡 - 若含图片或图标，给它们加
vertical-align: middle，否则基线偏移会让line-height的垂直空间“错位”
哪些写法看似修复实则埋坑？
这些操作常被误当作解决方案，但会引发新问题：
-
overflow: hidden虽能临时恢复父容器高度，但会裁剪position: absolute子元素（如下拉菜单） -
font-size: 0消间隙时，若漏重置子元素font-size，文字直接消失 -
line-height: 0或vertical-align: top硬压浮动元素，对块级浮动元素无效（vertical-align只对inline/inline-block生效） - 只在子元素设
height: 100%，但父容器没明确高度上下文（比如没设html, body { height: 100% }），结果仍是0
真正关键的不是让 line-height “显形”，而是让它有可依附的容器高度和可对齐的基线位置。一旦父容器塌陷，再大的 line-height 也只是飘在空中的行框。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
