选项1：显示：阻止;

Question

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

视频元素高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

HTML5 video元素被标记为流内容或定相内容或嵌入内容，这意味着它将像内联元素一样运行。因此它尊重HTML周围的空白（如空格，换行符等）。

选项1：显示：阻止;

将其设为块将删除为文本中的下降器保留的视频元素下的空间。（下降者是下降到基线的y，g，p等字符的底部部分。

要解决此问题，请将您的视频设置为：

display: block;

选项2：vertical-align：top;

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

vertical-align: top;

有关视频标记及其视频标签的详情，请参阅 here 属性。
here ，了解有关流内容的更多信息。
最后 here 了解有关字体的更多信息伸。

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

1 个答案:

选项1：显示：阻止;

选项2：vertical-align：top;