line-height 应使用无单位数值（如1.5）而非固定像素值，以确保响应式适配和继承正确；它作用于行框而非单个内联元素，需配合vertical-align或display:inline-block才能显效；在flex/grid中仍生效但受对齐属性影响。
line-height 设置多少才不踩坑
行高不是越大越好，也不是和字体大小一样就行。默认值 normal 在不同浏览器、不同字体下渲染差异明显，尤其在中文排版里常导致行间挤或空太多。
-
line-height: 1.5是较稳妥的起点，适用于大多数正文（如 14–16px 字体），它按字体大小的倍数计算，响应式友好 - 避免用
line-height: 20px这类固定值——子元素字体变大时，行高不会自适应，容易重叠或留白失控 - 如果父容器用了
line-height: 1（常见于按钮或标题），又忘了重置子元素，内联元素（如span）会继承并压扁文字
为什么 inline 元素的 line-height 看不见效果
行高作用的是「行框盒子」（line box），不是单个文字。对纯 inline 元素（比如没换行的 span），line-height 只影响它所在那一行的整体高度，但不会撑开自身盒模型——所以你调了没感觉。
- 想让某个
span看起来“更高”，得配合vertical-align（如vertical-align: top）才能显出差异 - 更直接的办法：把它变成
display: inline-block，此时line-height会参与自身高度计算 - 注意：
line-height不影响块级元素的height，除非内容只有一行且无 padding/border
line-height 在 flex 或 grid 容器里还管用吗
管用，但优先级被覆盖。当父容器是 display: flex 或 display: grid，子项的垂直对齐由 align-items 或 justify-content 控制，line-height 仅在子项是 inline 或文本节点时，影响其内部行框。
- 比如一个
div设了line-height: 3，里面只有一行文字，在 flex 容器中它仍可能被align-items: center居中，看起来像没生效 - 若子项是多行段落，
line-height依然控制每行间距，但整体容器高度由 flex 的伸缩规则决定 - 调试时可临时加
border: 1px solid red看实际行框范围，比猜靠谱
移动端 rem + line-height 组合的兼容细节
用 rem 做字号响应时，line-height 若写成数字（如 1.6）能随根字体缩放；但若写成 24px 就会锁死，失去响应能力。
立即学习“前端免费学习笔记（深入）”；
- 推荐统一用无单位数值：
font-size: 1.2rem; line-height: 1.5; - iOS Safari 对小字号（
< 12px）的line-height渲染有最小限制，实际显示可能大于设定值 - Android WebView（尤其旧版本）对
line-height: normal解析不稳定，建议显式声明数值
