line-height设在p上最稳妥，因p是天然块级文本容器，能生成行框并使整段文字行高受控；无单位数值（如1.6）可随font-size动态缩放，确保响应式与嵌套一致性。
line-height 是唯一可靠、标准且可预测的控制方式。其他手段（如 height、padding、vertical-align）只能辅助，不能替代。
为什么直接设在 p 上最稳妥
段落是典型的文本流容器，line-height 必须作用于能形成“行框”（line box）的块级元素上。p 天然满足这个条件；而设在子元素（如 span 或 a）上基本无效——它不会撑开整行，只影响该内联元素自身的基线位置。
- 设在
p上：整段文字所有行都受控，继承自然，响应式安全 - 设在
body上：可作为全局基准（如body { line-height: 1.6; }），但标题等需单独覆盖 - 设在
div上：仅当该div内含纯文本或标准行内内容时有效；若内部是display: flex或grid，line-height完全不生效
line-height 用数字还是像素？
绝大多数场景下，无单位数字（如 1.6）是唯一合理选择。它基于当前元素的 font-size 动态计算，字体变大，行高自动放大；嵌套不同字号的子元素时，各行内内容仍保持比例协调。
- 用
px（如line-height: 24px）：仅适用于后台表格、固定高度卡片等严格控高的极少数情况；用户缩放字体、辅助技术介入或移动端系统字体调整时极易重叠或留白失控 - 避免百分比（如
160%）：语义模糊，且继承的是计算后的绝对值，多层嵌套后行为不可控 - 别用
normal：浏览器实现差异大，Chrome 和 Safari 对中文字体的默认值可能差 0.2 以上
常见失效原因和排查点
设置了 line-height 却没变化？大概率不是属性写错，而是被其他规则覆盖或布局模式干扰。
- 检查是否被更高优先级样式覆盖：用浏览器开发者工具看
computed标签页，确认line-height的最终值和来源 - 确认父容器没有
overflow: hidden或max-height截断了行框 - 如果
p里套了display: inline-block或float元素，可能破坏行框生成逻辑 - 中文段落若用了
white-space: nowrap，单行长文本会无视line-height（因为只有一行）
真正难的不是设一个值，而是理解 line-height 控制的是“行框最小高度”，不是“两行文字基线之间的距离”。它和 font-size、vertical-align、甚至字体本身的上升/下降部（ascender/descender）共同决定视觉间距——所以同一数值，在思源黑体和宋体下看起来可能完全不同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
