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 但仍有空白——此时基本可锁定是基线对齐所致。
智能移动网站管理系统(SmartMobile)
下载
智能移动网站管理系统( SmartMobile )是由仙人掌软件基于asp+access/html5/jquery mobile/css、php+mysql/html5/jquery mobile/css3环境下开发的企业级移动网站管理系统。SmartMobile 内置单页、新闻、产品、视频等内容模型，在很大程度上满足了更多层次用户的需求和发展需要，兼容Android、iOS、黑莓等手机操作平台。
立即学习“前端免费学习笔记（深入）”；
- 临时在控制台执行
document.querySelector('video').style.verticalAlign = 'top'，立即观察空白是否消失 - 对比不同浏览器：Firefox（Linux）通常默认
display: block，而 Chromium（Chrome/Edge/Vivaldi）默认inline，差异即源于此
跨平台一致性的兜底写法
如果项目需严格保证 Windows/macOS/Linux 表现统一，建议不依赖浏览器默认值：
- 全局重置（在 CSS 初始化段）：
video { display: block; }或video { vertical-align: top; } - 避免用
margin-bottom: -4px这类 magic number 修复——它在高 DPI 屏幕或缩放比例变化时极易失效 - 若用框架（如 Vue/React），确保内联样式或 scoped CSS 未意外覆盖该声明；Shadow DOM 中需在内部样式表中显式设置
真正麻烦的不是定位问题，而是误判为「Linux 渲染 bug」而去查内核、驱动或 ffmpeg 编解码——其实只是 CSS 对齐没管住。
