Question

我试图在<video>元素上显示紫色封面，但我不知道为什么封面会超出视频底部边框一点点。这是我的代码：

＆＃13;

.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;
}

＆＃13;

<div class="media-cover">
  <video class="cmedia-box" controls>
  <source class="cmedia" src="https://cdn.theguardian.tv/mainwebsite/2017/08/04/040717heart_desk.mp4" />
</video>
</div>

＆＃13;

有人能帮帮我吗？

Answer 1

在文档流程中，所有内联元素都可以安全地被视为字母。当您键入a b c时，您希望浏览器呈现字母之间的空格。

同样，对于内联元素，浏览器会渲染它们周围的空格（video的默认display值为inline）：

<div class="media-cover">
   <video class="cmedia-box" controls>...</video>
</div>

...将在</div>关闭之前在元素之后呈现这样的空格。要告诉浏览器不要渲染它，您有多种选择：

a）不要在那里添加空格：

<div class="media-cover">
   <video class="cmedia-box" controls>...</video
></div>

请注意，视频代码>的结尾与结束</div>的开头之间没有空格。

b）为display:inline提供一个块级别值（在display:block设置video将修复它。

c）浮动内联元素（即：float:left video将修复它。

HTML：为什么视频封面超出其底部边界？

1 个答案: