推荐使用无单位数字（如line-height: 1.5），它基于当前字体大小计算且继承时按子元素字号重算；避免px/em单位及在内联元素上设置；需注意字体度量、多语言混排和截断风险。
line-height 设置为数字时，是相对于当前字体大小的倍数
直接写 line-height: 1.5 是最推荐的做法。它表示行高 = 当前元素的 font-size × 1.5，且该值会继承给子元素并**按子元素自身的 font-size 重新计算**，语义清晰、响应友好、无意外缩放。
常见错误是写成 line-height: 1.5px 或 line-height: 1.5em：前者强制固定像素值，字号变大时行距不会同步放大；后者在嵌套中会层层相乘（比如父级 line-height: 1.5em + 子级 font-size: 1.2em，实际行高可能变成 1.5 × 1.2 × 基准字号），极易失控。
- ✅ 推荐：
line-height: 1.6（无单位纯数字） - ❌ 避免：
line-height: 24px（固定像素，不随字号缩放） - ❌ 避免：
line-height: 1.5em（em 在 line-height 中有继承放大风险）
内联元素（如 span）上设置 line-height 可能无效
line-height 对非替换的内联元素（例如 <span></span>）**不产生行框高度效果**——它只作用于生成行框的块级容器或行内块/表格单元格。你给 <span></span> 单独设 line-height: 3，视觉上几乎没变化。
真正起作用的是包裹它的块级上下文，比如段落 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 或 <div>。如果想让某一段文字“看起来”行距更大，必须设在包含它的块级元素上。
<ul>
<li>有效位置：<code>p、div、h1 等块级元素
span、a（除非它们被设为 display: inline-block 或 display: block）line-height 实际生效节点line-height 过小导致文字被截断的隐藏问题
当 line-height 小于字体自身的行高需求（比如设成 0.8），文字可能被上一行或下一行的行框裁剪，尤其在使用自定义字体或图标字体时更明显——这不是 bug，而是 CSS 行盒（line box）布局规则决定的。
浏览器根据 line-height 计算行盒高度，并将内容在其中垂直居中；若内容（特别是升部/降部）超出该范围，就会被 clip。中文影响相对小，但英文、数学符号、emoji 或 icon font 容易出问题。
- 安全下限建议：正文至少用
line-height: 1.2，小字号（如 12px）建议 ≥1.3 - 验证方法：在 Chrome DevTools 中勾选「Rendering」→「Paint flashing」，滚动观察是否频繁重绘，可间接提示渲染异常
- 注意：某些字体（如思源黑体 Variable）的
line-gap元数据会影响实际表现，不能只看数值
多语言混排时 line-height 的兼容性陷阱
中英混排、中日韩混排时，不同字体的基线（baseline）、升部（ascent）、降部（descent）差异很大。单纯靠统一 line-height 很难兼顾所有字符，尤其当用了 Web Font 或系统字体栈（如 "Helvetica Neue", "PingFang SC", "Microsoft YaHei"）时。
此时 line-height 数值只是控制行盒高度，但各字体内部度量不一致，会导致同一行里汉字“下沉”、英文字母“上浮”，视觉错位。这不是 CSS 失效，而是字体设计本身的问题。
- 缓解方案：优先用支持多语言的统一线高字体（如 Inter、Noto Sans、HarmonyOS Sans）
- 进阶手段：对关键段落加
font-feature-settings: "tnum";统一数字度量，或用vertical-align: middle微调内联元素 - 真实限制：CSS 目前无法为不同 Unicode 区块指定不同 line-height，只能靠字体选型和容器约束来平衡
line-height 最常被低估的是它和字体度量、继承机制、显示设备像素比之间的耦合关系。调一个数值容易，让它在各种字号、各种语言、各种嵌套深度下都“刚好不碰线又不松散”，需要反复在真机和不同字体下验证。
