video元素默认display:inline导致底部baseline对齐间隙约4px，最可靠解法是设display:block；若需行内布局，可用vertical-align:bottom或middle，避免魔数修复。
video 元素默认有底边距，因为它是行内元素
HTML5 的 默认是 display: inline，会像文字一样对齐基线（baseline），导致底部留出约 4px 空隙——这不是 margin 或 padding，而是行内对齐产生的“看不见的间隙”。
常见现象：视频容器明明设了 height 和 width，但底部总多出一段白边，尤其和紧邻的按钮、文字放一起时特别明显。
- 最直接解法：给
加display: block - 若需保持行内布局（比如和文字混排），改用
vertical-align: bottom或vertical-align: middle - 避免用
margin-bottom: -4px这类魔数修复，不同字体/缩放下会失效
父容器 overflow:hidden 不能掩盖 video 底部间隙
有人试过给 外层加 overflow: hidden，发现没用——因为间隙不是子元素溢出，而是父行盒（line box）自身高度被 baseline 拉高了。
验证方法：在 后加一个 X，你会发现 X 的底部和 video 底部不对齐，X 实际贴着 baseline，而 video 的底边在 baseline 下方。
立即学习“前端免费学习笔记（深入）”；
- 真正起作用的是控制
自身的对齐方式或显示类型 -
font-size: 0在父容器上可临时消除间隙，但会影响内部其他文本，慎用 - Flex 布局中设
align-items: flex-start也能绕过该问题，但本质仍是改变了对齐上下文
autoplay/muted 属性不影响底部留白，但影响加载行为
很多人误以为加了 autoplay 或 muted 就能“重置”样式，其实这些属性只影响媒体播放策略，对盒模型毫无影响。
不过要注意：某些浏览器（如 Safari）在未静音自动播放失败时，可能降级为 poster 占位图，而 poster 图片若未设 object-fit 或宽高比，反而会因拉伸/裁剪加剧视觉上的“底部不齐”错觉。
- 确保
有明确width和height，或用aspect-ratio配合object-fit: cover - 如果用 poster，建议尺寸与视频原始宽高比一致，避免渲染时重排引发额外偏移
- 不要依赖
controls开关来调试留白——控件是绝对定位，不影响主盒模型
移动端 viewport 缩放可能放大间隙感知
在 iOS Safari 或某些 Android 浏览器中，页面缩放（哪怕只是 1.0）有时会让 baseline 对齐误差更明显，尤其当父容器用了 rem/em 单位时。
这不是 bug，而是缩放后字体度量微调，间接影响了行盒高度计算。此时单纯调 vertical-align 可能不够稳定。
- 推荐统一用
display: block，它彻底脱离行内格式化上下文，最可靠 - 若必须行内，请配合
line-height: 0在父容器上，并确保内部无其他文本干扰 - 避免用
transform: translateY(-1px)类似 hack，动画或滚动时易出现闪烁
最稳妥的做法永远是把 当成块级内容来对待——它本就不该参与文字流对齐。那些看似“省事”的 inline 行为，后期调试成本反而更高。
