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:left на video исправит его.