<div>容器与内部<video>元素底部间隙问题求助

你遇到的这个底部间隙，本质是video元素默认的行内块（inline-block）渲染特性导致的——行内块元素会和文本基线对齐，从而在底部留下微小留白，和margin/padding、object-fit无关。

解决方案 #

只需要给video元素添加以下任意一种CSS规则即可消除间隙：

方案1：将video转为块级元素（推荐）

块级元素不会有基线对齐的问题，直接填满容器：

video {
    display: block; /* 核心修改 */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

方案2：强制video对齐容器底部

如果需要保留行内块特性，可通过调整垂直对齐方式消除间隙：

video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: bottom; /* 核心修改 */
}

补充说明 #

audio元素没有这个问题，是因为浏览器对audio控件的默认渲染逻辑不同——它的控件区域默认是块级行为，不会触发基线对齐的留白。

内容的提问来源于stack exchange，提问作者Giovanni