line-height用于控制文本行间距，提升可读性。它设置行框高度，影响垂直排版：值过小致重叠，过大浪费空间。推荐使用无单位数值（如1.5），正文宜1.4~1.6，标题可用1.2~1.3。避免全局设过大值，慎用小于font-size的line-height以防截断。
line-height 是CSS中用于控制文本行与行之间垂直间距的属性，通常应用于段落、标题或块级文本容器。它的主要作用是提升文本的可读性和视觉舒适度，避免文字挤在一起或过于松散。
line-height 的基本作用
line-height 设置的是**行框的高度**，即每一行文字基线之间的距离。它直接影响文本在垂直方向上的排版效果：
- 值太小会导致上下行文字重叠，影响阅读
- 值太大则会浪费空间，破坏布局紧凑性
- 合适的 line-height 能让文本呼吸感更强，尤其在长段落中尤为重要
line-height 的取值方式
该属性支持多种赋值形式，不同写法有不同应用场景：
- 无单位数值（如 1.5）：推荐使用。它是相对于当前字体大小（font-size）的倍数，具有良好的继承性
- 像素值（如 20px）：固定高度，适合精确控制，但在响应式设计中可能不够灵活
- 百分比（如 150%）：基于当前字体大小计算，但子元素继承时可能产生意料之外的结果
- em 单位（如 1.5em）：相对父元素字体大小，使用时需注意层级叠加效应
常见使用技巧与建议
合理设置 line-height 可显著改善页面文本体验：
立即学习“前端免费学习笔记（深入）”；
- 正文文本建议使用 1.4 到 1.6 的无单位值，兼顾美观与可读性
- 标题可以适当缩小 line-height（如 1.2~1.3），使其更紧凑有力
- 在多语言混合排版时，line-height 能帮助对齐不同基线的文字
- 与 vertical-align 配合使用，可精准控制内联元素或图标与文字的垂直对齐
注意事项与常见问题
虽然 line-height 简单易用，但也有一些细节需要注意：
- 避免在全局样式中设置过大的 line-height，防止按钮、导航等组件变得过高
- 使用无单位值时，子元素会基于自身 font-size 重新计算行高，这是理想行为
- 当 line-height 小于 font-size 时，可能导致文字截断，尤其在移动端需谨慎
