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 就能“重置”样式，其实这些属性只影响媒体播放策略，对盒模型毫无影响。
