求助：移除j4.nautilusitalia.com首页视频下方的顽固白线

算力阿峰

2026-7-23

解决视频下方白线问题的CSS方案

以下是几种常见的解决思路，你可以逐一尝试：

修复内联元素基线对齐问题
视频默认是inline-block元素，会和文本基线对齐，导致下方出现空隙。给视频元素添加：
```
video {
  display: block;
  vertical-align: middle;
}
```
检查是否存在隐藏的边框或轮廓
有些容器或视频元素可能设置了透明或同色系的边框/轮廓，尝试清除：
```
.视频所在容器类名, video {
  border: none;
  outline: none;
}
```
（替换.视频所在容器类名为实际的容器选择器，可通过浏览器开发者工具查看元素的类/id）
消除父元素的行高影响
父元素的line-height可能会导致空隙，设置父元素：
```
.视频父容器 {
  line-height: 0;
}
```
检查背景色溢出或伪元素
查看是否有父元素的背景色通过padding或伪元素（:before/:after）露出，或者视频下方有隐藏的伪元素，可通过开发者工具的元素面板逐一排查，找到对应元素后设置：
```
.疑似元素选择器 {
  display: none;
  background: transparent;
}
```
调整视频的object-fit属性
如果视频的尺寸和容器不匹配，可能导致空隙，尝试设置：
```
video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
```