HTML中设置文本行高需使用CSS的line-height属性，其作用是控制文本行之间的垂直距离，优化阅读体验与页面布局。
padding：元素内容与边框间的内边距，影响元素可视区域大小。
margin：元素边框外的外边距，控制元素间距离。
关键区别：line-height仅调整文本行内部垂直空间，而padding/margin调整元素整体间距。例如，用padding调整段落间距是错误做法，应使用margin。
父元素font-size: 16px，line-height: 1.6 → 行高25.6px。
子元素font-size: 32px → 行高自动变为51.2px（32×1.6）。
单行文本垂直居中陷阱
问题：设置line-height等于容器高度（如line-height: 40px）可实现单行居中，但多行文本会溢出导致布局混乱。
解决：多行文本使用Flexbox或Grid布局实现垂直对齐。.container { display: flex; align-items: center; height: 100px;}
父元素固定行高导致子元素文字重叠
问题：父元素设置绝对单位（如line-height: 20px），子元素字体较大时会重叠。
解决：避免父级使用绝对单位，或为子元素重新设置line-height。
行内元素背景高度异常
问题：line-height决定行内元素（如<span>）的背景高度，即使文字较小，背景也可能过高。
解决：调整line-height或改用padding控制背景区域。
可访问性（Accessibility）问题
规范建议：正文line-height不小于1.5，通常1.5-1.8为宜。过小导致阅读困难，过大降低信息密度。
示例：body { font-size: 16px; line-height: 1.6; } /* 符合可访问性标准 */
line-height是CSS中控制文本行间距的核心属性，通过合理选择取值类型（尤其推荐无单位数值）和避免常见陷阱，可显著提升页面可读性与响应式适配能力。实际开发中需结合font-size、padding/margin等属性，并遵循可访问性规范，以实现优雅的文本排版效果。
