video 默认 display: inline 导致右侧幽灵空白，根本解法是设 display: block；flex 中需加 flex-shrink: 0 或 flex: 0 0 auto；务必移除 width/height HTML 属性，改用 CSS 的 max-width: 100% + height: auto。
video 元素默认 display 值导致右侧留白
HTML5 默认是 inline 显示，会像文字一样参与行内布局，受父容器字体大小、行高、空白字符影响，右侧常出现不可见但真实存在的空白间隙——尤其当它后面有换行或空格时，浏览器会把它当做一个“单词”处理，保留末尾空格的渲染空间。
常见现象：父容器设了 width: 300px， 自身宽 280px，但右侧仍有 20px+ 不可控空白，inspect 元素能看到右侧有“幽灵空白”。
- 临时验证：给
加font-size: 0或line-height: 0，空白消失 → 确认是 inline 布局问题 - 根本解法：改
display类型，而非调width或margin - 推荐优先用
display: block，避免 inline 引发的基线对齐、换行符解析等连锁问题
flex 布局中 video 右侧撑开的隐藏原因
当 放在 display: flex 容器里，即使设了 width: 100%，右侧仍可能多出几像素空白。这不是 margin 或 padding，而是 flex-shrink 默认为 1，且视频元素存在固有宽高比（intrinsic aspect ratio），浏览器在 flex 分配剩余空间时，会按比例缩放并保留最小可显示尺寸，导致实际渲染宽度略超预期。
- 检查是否用了
object-fit: contain或cover—— 它们不改变元素盒模型尺寸，只裁剪内容，盒本身仍按原始宽高比占位 - 加
min-width: 0或flex-shrink: 0可强制压缩，但需配合width: 100%才生效 - 更稳妥写法：
flex: 0 0 auto+width: 100%，明确禁用伸缩，交由 width 控制尺寸
video 标签内联属性与 CSS width 冲突
width 和 height 是 的 HTML 属性，它们设置的是“初始渲染尺寸”，而 CSS 的 width 是样式层控制。两者共存时，CSS 会覆盖 HTML 属性，但若 CSS 没写单位（如 width: 100）、或写了 width: auto，浏览器会回退到 HTML 属性值，此时若 HTML 属性值过大（比如 width="640"），就会在窄容器里强行撑开右侧。
立即学习“前端免费学习笔记（深入）”；
- 务必移除
width/heightHTML 属性，全交给 CSS 控制 - 避免
width: 100px这类固定值，改用max-width: 100%+height: auto保比例 - 如果必须响应式缩放，加
height: auto防止拉伸变形；否则仅设width: 100%会导致高度塌陷
移动端 viewport 缩放干扰 video 实际宽度
部分安卓 WebView 或旧版 iOS Safari 在页面未正确声明 时，会触发默认缩放（initial-scale ≠ 1），导致 100vw 计算失准， 渲染宽度超出容器边界，右侧出现滚动条或空白溢出。
- 确认
中有： - 不要用
user-scalable=no或maximum-scale，它们会干扰 pinch-zoom 行为，间接影响 layout viewport 计算 - 真机调试时，用
document.documentElement.clientWidth对比window.innerWidth，若差异 > 1px，大概率是 viewport 解析异常
