HTML: why video cover exceeds its bottom border?

问题

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?

回答1:

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.

来源：https://stackoverflow.com/questions/50149039/html-why-video-cover-exceeds-its-bottom-border