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

Question

我试图在<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="cmedia-box" controls>
  <source class="cmedia" src="https://cdn.theguardian.tv/mainwebsite/2017/08/04/040717heart_desk.mp4" />
</video>
</div>

谁能帮助我？

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:lefton video将修复它.