为何<video>元素的紫色遮罩层超出其底部边框？

安全阿岳

2026-5-26

问题

我尝试在<video>元素上方显示一层紫色遮罩，但发现遮罩会略微超出视频的底部边框，不清楚原因所在。以下是我的代码：
.media-cover { display: inline-block; position: relative; }
.media-cover:after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #6b478fb3; opacity: 0; }
.media-cover:hover:after { opacity: 1; }
video { border: 2px solid red; height: 150px; }
<div class="media-cover">
  <video class="..." ...></video>
</div>

解决方案

嘿，这个问题我之前也踩过坑！其实原因很简单：<video>元素默认是行内替换元素，它会和文本基线对齐，这就导致视频底部会留出一小段空白（大概是字体的下行部分高度）。而你的.media-cover是inline-block，它的高度会包含这段空白，所以伪元素::after设置height:100%时，就会超出视频的边框啦。

给你几个靠谱的解决办法：

给视频设置display:block：这是最直接的方案，把视频改成块级元素后，就不会有基线对齐的空白问题，.media-cover的高度就完全等于视频的高度（包括你加的2px边框），伪元素自然就和视频完全贴合了。修改后的CSS：
```
video {
  border: 2px solid red;
  height: 150px;
  display: block; /* 新增这行 */
}
```
给父容器.media-cover设置font-size:0：inline-block元素的底部空白来自于字体的行高间距，把父容器的字体大小设为0就能消除这个空白。不过要注意，如果容器里还有其他文本内容，这个方法会影响文本显示，适合只有视频的场景。
给视频设置vertical-align:top：强制视频顶部对齐，也能去掉底部的空白区域，这个方法不需要改变元素的显示类型，适合需要保持行内特性的场景。