video 元素在 Linux 浏览器底部留白的常见原因是其默认 display: inline 导致基线对齐（baseline alignment），在 Linux 字体渲染下明显预留 descent 空间；修复方式包括设 display: block、vertical-align: top/middle 或父容器 line-height: 0。
video 元素在 Linux 浏览器中底部留白的常见原因
这不是 HTML5 规范问题，而是 Linux 下多数浏览器（尤其是 Chromium 系列）对 默认采用 display: inline 渲染，导致其像文字一样参与基线对齐（baseline alignment），下方自动预留 descent 空间——这在 Windows/macOS 上因字体渲染差异常不明显，但在 Linux（尤其使用 Noto Sans、DejaVu 等字体时）会直观表现为视频底部多出 3–6px 空隙。
快速修复：用 CSS 覆盖默认对齐方式
最直接有效的解法是切断基线对齐行为。以下任一方式均可生效，按优先级推荐：
- 给
添加display: block——适用于不需要内联布局的场景（如独立播放器容器） - 设
vertical-align: middle或vertical-align: top——适合需保持内联流式布局（如与文字/图标并排）的情况 - 设
line-height: 0在父容器上 ——若父元素仅含且无其他行内内容，可一并消除行框干扰
示例：
Linux 特定调试技巧：验证是否真为 baseline 问题
打开开发者工具（F12），选中 元素，在「Computed」面板中检查：display 值是否为 inline，vertical-align 是否为 baseline，再看「Layout」或「Box Model」里底部 margin/padding 是否为 0 但仍有空白——此时基本可锁定是基线对齐所致。
