line-height 设为 1.4 最不伤眼，它在中英文混排、字号14–18px时最稳妥；应优先使用无单位数值（如1.4），避免px/em等单位导致响应式失效或嵌套计算偏差。
line-height 设为多少才不伤眼
1.2–1.5 是多数正文的合理区间，line-height: 1.4 在中英文混排、字号 14–18px 场景下最稳妥。设成 1 或 1.0 看似紧凑，实际行间挤压严重，尤其含上标、下标或 emoji 时，字形会视觉粘连；设成 2 又太松散，打断阅读节奏。
常见错误现象：line-height: 20px（固定像素值）——字体大小一变，行距就崩，响应式失效；line-height: 1.2em——em 相对父元素计算，嵌套深了容易意外放大。
- 优先用无单位数值（如
1.4），它基于当前元素的font-size动态计算，安全又灵活 - 避免
px、em、rem等带单位写法，除非你明确控制所有祖先的字体尺寸 - 小字号（≤12px）可略提至
1.5，大标题（≥24px）可压到1.2～1.3，但正文别破例
内部 style 中怎么写才不被覆盖
内联 style 属性优先级虽高，但若 CSS 里用了 !important 或更具体的选择器（比如 p.content > span），照样能盖过它。真正可靠的写法是直接在目标标签上写 style，且确保没有更高权重规则干扰。
使用场景：快速原型、邮件模板兼容、CMS 输出受限无法外链 CSS 时。
立即学习“前端免费学习笔记（深入）”；
- 写成
<p style="line-height: 1.4;"></p>，不要写成<style>p { line-height: 1.4; }</style>—— 后者属于内部样式表，仍可能被后续<style></style>或外部 CSS 覆盖 - 如果必须用
<style></style>块，加!important（如line-height: 1.4 !important;），但这是权宜之计，别长期依赖 - 注意浏览器默认样式（如 Chrome 对
textarea有内置line-height），某些元素需单独重置
line-height 和 font-size 的隐性冲突
line-height 的无单位值看似简单，但它和 font-size 共同决定行框（line box）高度，而行框又影响垂直对齐、换行位置甚至父容器高度。一个典型坑：父容器 height 固定，子元素 line-height 设得过大，文字会被截断，却没报错。
性能影响极小，但兼容性要注意：IE8+ 都支持无单位 line-height，但旧版 Android WebView（≤4.3）对小数精度处理不稳定，1.42 可能被四舍五入成 1.4 或 1。
- 检查是否启用了
box-sizing: border-box，否则line-height加 padding/margin 容易撑破容器 - 用
vertical-align: baseline（默认值）时，line-height过大会让行内元素（如img）底部悬空，此时改用vertical-align: middle更稳 - 若文本含
sup或sub，建议额外加line-height: 1.5并测试渲染，Chrome 和 Safari 对上标基线处理略有差异
移动端适配时 line-height 的陷阱
手机端缩放、系统字体放大（如 iOS「更大字体」设置）、WebView 渲染模式都会让 line-height 表现失真。最常被忽略的是：iOS Safari 在横屏切换后有时会忽略内联 style 中的 line-height，直到触发重排（比如 resize 事件）。
可给出简短示例：
<p style="font-size: 16px; line-height: 1.4;">这是一段正文</p>
但别指望它在所有 WebView 里都一致。Android 微信内置浏览器曾把 line-height: 1.4 解析为 1.4px（错误单位推导），导致行距归零。
- 对关键阅读区域（如文章正文），用 class + 外部 CSS 替代内联
style，更可控 - 测试时打开系统「增大辅助字体」开关，观察是否出现行间重叠或空白异常
- 不要依赖
line-height实现垂直居中，那是flex或grid的活，line-height只管行内基线间距
line-height 不是“行与行之间的空白”，而是“行框的最小高度”——这个概念偏差，会让所有调整都浮在表面。 
