包装视频元素会导致奇怪的高度

Question

如果我将 HTML5-Video 元素放置在 div 中，它会导致包装器的高度大于视频元素。包装器比视频源高 7 像素。没有最小高度或其他东西。

看一看！（向下滚动到视频）

视频元素高 513 像素，环绕 div (.image) 高 520 像素。

<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

HTML5video元素被标记为 Flow Content、Phasing Content 或 Embed Content，这意味着它的行为类似于内联元素。因此，它尊重 HTML 周围的空白（如空格、换行符等）。

选项1：显示：块；

将其设置为块将删除视频元素下方为文本下行部分保留的空间。（下伸是字符，如的底部部分y，g，p等：下降到基线）。

要修复它，请将您的视频设置为：

display: block;

选项 2：垂直对齐：顶部；

将视频设置为顶部垂直对齐。为下行保留的空间仍然存在，但它会出现在视频的顶部，但因为视频的高度将远高于文本，所以它永远不会产生影响。

vertical-align: top;

• 有关视频标签及其属性的更多信息，请参见此处。
• 而这里对流量内容的更多信息。
• 最后在这里了解有关字体下降器的更多信息。