line-height 仅控制每行文字基线间距，非段落间距；固定像素值易致行距失衡；多行省略需严格匹配 line-height 与 max-height；内联元素上无效因作用于行框而非自身；表单控件中不影响自身尺寸；应避免全局覆盖而写入语义容器。
line-height 不是用来“控制段落间距”的，它只管**每行文字内部的垂直节奏**——即基线到基线的距离。想靠它撑开段与段之间的空隙，只会让段内行距失控，是常见误用。
为什么 line-height: 24px 在多行文本里会出问题
它把行高锁死在 24px，不管当前字号是 14px 还是 20px，也不管子元素有没有放大字号。结果就是：
- 小字号（如
font-size: 12px）下，line-height: 24px留白过大，文字像飘在空中 - 大字号（如
font-size: 18px）下，24px 行高几乎等于字号本身，降部（“g”、“y”底部）被截，阅读吃力 - 响应式切换
font-size为rem时，px值完全不缩放，用户放大字体后行距反而越来越紧
多行省略（-webkit-line-clamp）必须配对设置 line-height
用 -webkit-line-clamp: 3 截三行时，line-height 不只是“看起来舒服”，它直接决定容器能否完整容纳三行+省略号。算错一点，最后一行就被切半截，或省略号悬空。
- 必须同时设
line-height、max-height和display: -webkit-box -
max-height必须严格等于line-height × 行数，且单位一致：比如line-height: 1.6em，则max-height: calc(1.6em * 3) - 避免写
line-height: 1.6em+max-height: 48px→ 单位混用，且em在祖先缩放时会漂移 - Firefox 不支持
-webkit-line-clamp，若用 JS 实现截断，line-height仍是计算行数的唯一可靠依据
内联元素（span、a）上设 line-height 为啥没反应
line-height 作用对象是**行框（line box）**，不是单个 span 或 a。给它们单独设值，往往没视觉变化——因为父块（比如 p）已经撑开了整行，子元素只是被塞进去按默认 vertical-align: baseline 对齐。
- 真正影响内联元素上下位置的是
vertical-align：想居中对齐图标，用vertical-align: middle；想让链接底部贴文字底边，用vertical-align: text-bottom - 如果真需要控制单个内联元素高度，把它变成
display: inline-block，此时line-height才参与自身盒模型计算 - 表单控件（
input、button）是替换元素，line-height只影响它所在行框高度，不改变控件自身尺寸
最常被忽略的点：当 CMS 或用户输入内容结构不可控时，别用通配符 * { line-height: 1.6 !important } 强制覆盖——它会破坏按钮、表格单元格等组件的原有排版。应该把 line-height 明确写在语义容器上，比如 p、.article-content 这类可预期的上下文里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
