是元数据标签，不参与CSS渲染，故line-height对其无效；字幕由浏览器底层合成，仅支持color、font-size等极少数样式属性。

HTML 没有专门的“字幕标签”， 是表格标题， 是视频字幕轨道容器——它本身不渲染文字，真正显示字幕的是浏览器内置字幕渲染层，无法用 line-height 直接控制。

为什么给 设 line-height 完全无效

因为 是元数据标签，不参与 CSS 渲染流程。你写 或在 CSS 里选中它，开发者工具里根本看不到 line-height 被计算或应用。字幕文本由浏览器底层合成，样式接口极其有限（仅支持极少数属性，如 color、font-size、text-shadow）。

• Chrome / Edge 的字幕渲染基于 WebVTT 规范，行高由字体大小 + 内置行距算法决定，不可覆盖
• Firefox 更严格，连 font-family 都可能被忽略，line-height 属于完全不支持的属性
• 试图用
  模拟字幕并加 line-height？那已不是标准字幕，无法与视频时间轴同步，也绕不开 的语义和可访问性要求

  的行高设置要避开 height 冲突

  是普通块级元素，line-height 可用，但容易被表格默认样式干扰。常见问题是：设了 line-height: 1.4 却看起来没变化，或者上下留白异常大。

  

  Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

  实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

  下载

  • 必须确认父 没设 border-collapse: separate（默认值），否则 caption 外边距会和表格边框叠加，视觉上“撑开”高度
    避免同时设 height 和 line-height：height 会强制截断内容，而 line-height 是行内空间，二者逻辑冲突
    多行
    文本（少见但合法）不能靠 line-height 控制整体高度，需用 padding 或 margin 调整外边距
    推荐写法：caption { line-height: 1.5; padding: 8px 12px; }，不碰 height，让内容自然撑开

    多行纯文本字幕（非 ）怎么调行距

    如果你用

    手动实现字幕（例如弹幕、实时翻译浮层），那就是标准 CSS 场景，但要注意换行和垂直节奏。

    • 用 white-space: pre-line 保留换行符，避免文字挤成一行
    • 设 line-height: 1.6（无单位），比固定像素更安全：字体缩放时行距同比例变化
    • 若字幕区域高度固定（如 60px），且必须单行居中，才用 line-height: 60px；多行场景绝对不要这么干，会导致第二行直接溢出
    • 中文多行字幕易粘连，line-height 至少 1.5，12px 小字号下建议 1.6–1.7
    • 最后一条字幕下方留空不足？不是 line-height 问题，是容器 padding-bottom 不够，或未清除浮动/行框基线影响

    真正难调的不是行高数值，而是字幕和视频帧率、字体加载、系统字体回退之间的耦合。比如 WebVTT 文件里用 包裹关键词，浏览器渲染时bold 字重会改变行框高度，导致同一行字幕在不同设备上行距不一致——这种细节，line-height 压根管不了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！