Обтекание видеоэлемента вызывает странную высоту

Question

Если я помещаю элемент HTML5-Video внутри div, он вызывает большую высоту обертки, чем элемент видео. Обертка на 7 пикселей выше, чем источник видео. Нет минимальной высоты или чего-то еще.

Have a look! (Scroll down to the Video)

видео элемент 513px высокий и оберточная DIV (.image) является 520px высоким.

<div class="image"> 
    <video muted loop autoplay style="width:100%;" id="video-player"> 
     <source treatidasreference="1" type="video/mp4" src="/fileadmin/user_upload/bilder/projekte/04_Online_Film_3D-CGI/sparkasse_iserlohn/Sparkasse_175Jahre_FinalCut_01_1_1_NEU.mp4"></source> 
    </video> 
</div> 

Answer 1

video HTML5, элемент отмечается как поток контента или Постепенное Content или Вставить Content означает, что он будет вести себя как строковый элемент. Поэтому он отличает пробелы вокруг вашего HTML (например, пробелы, разрывы строк и т. Д.).

Вариант 1: дисплей: блок;

Выполнение этого блока приведет к удалению пространства под элементом видео, которое зарезервировано для descender в тексте. (Descenders - это нижняя часть символов, таких как y,, p и т. Д., Которые спускаются к базовой линии).

Чтобы исправить это, установите видео быть:

display: block; 

---

Вариант 2: вертикальное выравнивания: сверху;

Установите видео, чтобы иметь вертикальное выравнивание сверху. Пространство, зарезервированное для descenders, по-прежнему будет присутствовать, но оно будет отображаться в верхней части видео, но поскольку высота видео будет намного больше, чем текст, он никогда не будет влиять.

vertical-align: top; 

---

• См here для получения дополнительной информации о видео тега и его свойств.
• И here для получения дополнительной информации о содержимом потока.
• И наконец here для получения дополнительной информации о шрифте descenders.