line-height 文字上下留白不均因控制行盒总高且按基线对齐；中文推荐1.7～1.8；flex/grid中需调align-items；不影响text-indent但影响视觉感知。
line-height 设置数值时为什么文字上下留白不均？
因为 line-height 控制的是「行盒（line box）」的总高度，不是字体上方/下方的空白各占一半。浏览器会把文字按基线对齐，上下留白自动分配，导致看起来“上空少、下空多”。尤其在中英文混排或使用非默认字体时更明显。
- 用无单位数值（如
line-height: 1.6）最安全：它基于当前font-size计算，继承时不会意外放大 - 避免用
px或em固定值：父元素字号变化后，行高无法自适应，移动端容易挤在一起 - 若需微调视觉居中，配合
vertical-align或用padding补偿，别硬调line-height
中文段落 line-height 推荐值是多少？
纯中文阅读场景下，line-height: 1.7～1.8 是较稳妥的起点。小于 1.5 容易粘连，大于 2.0 会割裂段落节奏。这个范围兼顾了宋体、微软雅黑、PingFang SC 等主流中文字体的字怀（glyph bounding box）和行间呼吸感。
- 正文小字号（如
14px）建议从1.75开始试；大标题可降到1.3～1.4，避免头重脚轻 - 行高过大会让锚点链接点击区域变虚——用户点文字边缘可能失效，这点常被忽略
- 某些字体（如思源黑体）自带较大内置行距，设
1.6实际已偏松，得实测
line-height 在 flex 或 grid 容器里失效怎么办？
当元素设了 display: flex 或 display: grid，子元素的 line-height 对齐效果会被容器的对齐方式覆盖。常见表现是文字贴顶、悬空，或看似没生效。
- 检查父容器是否用了
align-items: flex-start（默认值），改成align-items: center或baseline才能体现line-height的垂直空间 - 如果子元素是
inline或inline-block，line-height只影响其所在的行内格式化上下文，和 flex 主轴无关 - 想让单行文字在 flex 容器中垂直居中，优先用
display: flex; align-items: center，而非依赖line-height
line-height 影响首行缩进 text-indent 吗？
不影响。text-indent 是块级元素首行的左缩进，和 line-height 所作用的行盒高度无关。但两者叠加时，视觉上可能误判：比如 line-height: 2 + text-indent: 2em，缩进看起来比实际更大，是因为行高拉开了上下行距离，强化了“首行突出”的感知。
- 缩进值建议用
em（如text-indent: 2em），随字号缩放；避免用px导致小屏缩进过大 - 若段落含
inline元素（如图标、sup上标），line-height会影响它们的垂直位置，但text-indent仍只作用于第一行第一个字符的左侧 - 设置
line-height后发现首行缩进“不见了”，大概率是父容器用了overflow: hidden或white-space: nowrap，先排查这些
真正难调的不是数值本身，而是不同字体、不同字号、不同设备像素比下，人眼对“舒适间距”的判断差异很大。上线前至少在 iOS Safari 和 Chrome Android 上滚动看三屏文字，别信设计稿里的静态标注。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
