HTML：为什么视频封面超出底部边界？ [英] HTML: why video cover exceeds its bottom border?

问题描述

我试图在< code>< video> 元素上显示紫色封面，但我不知道封面超出视频底部边界的原因。这里是我的代码：

  .media-cover {display：inline-block ; position：relative;}。media-cover：after {content：'';位置：绝对;宽度：100％;身高：100％; top：0;左：0; background-color：＃6b478fb3; opacity：0;}。media-cover：hover：{opacity：1;} video {border：2px solid red; height：150px;}  

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

任何人都可以帮助我吗？

解决方案

所有内联元素都可以在文档流中安全地视为字母。当您键入 a b c 时，您希望浏览器呈现字母之间的空格。同样，使用内联元素，浏览器呈现它们周围的空格（ video ）的默认值为显示 inline 的值）：

 < div class =media-cover> 
  

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

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

 < div class =media-cover> 
< video class =cmedia-boxcontrols> ...< / video 
>< / div> 
  

请注意，视频标签的结尾> 和结束开始< / div> 。

b）给显示：inline 块级别值（设置 display：block on video 会修正它。

c）浮点内联元素（即： float：left on video 会解决它。

I am trying to show a purple cover over the <video> element, but I don't know why the cover exceeds the video bottom border a little bit. Here is my code:

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

Could anyone help me?

解决方案

All inline elements can safely be considered letters in document flow. When you type a b c, you expect the browser to render the spaces between your letters.

Similarly, with inline elements, the browser renders the spaces around them (video has a default display value of inline):

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

... will render such a space after the element, before the </div> is closed. To tell the browser not to render it, you have multiple options:

a) don't add a space there:

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

Note there's not space between the ending of video tag > and beginning of closing </div>.

b) give the display:inline a block level value (setting display:block on video will fix it.

c) float the inline element (i.e.: float:left on video will fix it.

这篇关于HTML：为什么视频封面超出底部边界？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！