包装视频元素会导致奇怪的高度
Wrapping an video-element causes strange height
如果我将 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>
HTML5 video 元素被标记为流内容或分阶段内容或嵌入内容，这意味着它的行为类似于内联元素。因此，它在您的 HTML 周围尊重白色 space（例如 spaces、换行符等）。
选项 1：显示：块；
将其设为块将删除视频元素下为文本的下行字母保留的 space。 （Descenders 是下降到基线的 y、g、p 等字符的底部。
要修复它，请将您的视频设置为：
display: block;
选项 2：垂直对齐：顶部；
将视频设置为顶部垂直对齐。 space 为下部保留的内容仍然存在，但它会出现在视频的顶部，但由于视频的高度将远远超过文本，因此它永远不会产生影响。
vertical-align: top;
如果我将 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>
HTML5 video 元素被标记为流内容或分阶段内容或嵌入内容，这意味着它的行为类似于内联元素。因此，它在您的 HTML 周围尊重白色 space（例如 spaces、换行符等）。
选项 1：显示：块；
将其设为块将删除视频元素下为文本的下行字母保留的 space。 （Descenders 是下降到基线的 y、g、p 等字符的底部。
要修复它，请将您的视频设置为：
display: block;
选项 2：垂直对齐：顶部；
将视频设置为顶部垂直对齐。 space 为下部保留的内容仍然存在，但它会出现在视频的顶部，但由于视频的高度将远远超过文本，因此它永远不会产生影响。
vertical-align: top;