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

Question

如果我在div中放置一个HTML5 5视频元素，它会导致包装器的高度大于视频元素。包装比视频源高7 7px。没有最小的高度什么的。

看一看!(向下滚动到视频)

视频元素高513 is，包装div (.image)高520 is。

<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

HTML5 video元素被注意为是流内容或分阶段内容或嵌入内容，这意味着它的行为将类似于内联元素。因此，它赋予HTML周围的空白(如空格、换行等)。

选项1:显示:块；

使其成为一个块将删除视频元素下的空间，该空间是为文本上的下降器保留的。(下划者是下降到基线的字符的底部部分，如y、g、p等)。

若要修复此问题，请将视频设置为：

display: block;

备选方案2:垂直对齐:顶部；

将视频设置为顶部垂直对齐。为下降器保留的空间将仍然存在，但它将出现在视频的顶部，但由于视频的高度将远远超过文本，它将永远不会有影响。

vertical-align: top;

• 有关视频标记及其属性的更多信息，请参见这里。
• 和这里获得更多关于流内容的信息。
• 最后，有关字体下降的更多信息，这里。