CSS - 内部 div 和包装器 div 之间的高度不匹配

Question

我有一个类似于以下内容的html文件。视频标签的包装器div 的高度超过必要的高度。

body {
margin: 0 0 0 0;
overflow: hidden;
}
div.small-wrapper {
background-color: green;
position: absolute;
top: 15px;
right: 15px;
z-index: 100;
max-height: 250px;
max-width: 250px;
overflow: hidden;
outline: 1px solid red;
}
div#wrapperOne {
background-color: #0c0c0c;
}
div.big-wrapper {
background-color: grey;
position: absolute;
width: 100%;
height: 100%;
z-index: 50;
}
#videoOne {
/* Fit video*/
width: 100%;
height: 100%;
outline: 1px solid cyan;
}

<div class="small-wrapper">
<div id="wrapperOne">
<video id="videoOne" src="https://www.w3schools.com/html/mov_bbb.mp4" muted></video>
</div>
</div>
<div class="big-wrapper">
</div>

#wrapperOne是 250 像素 x 141 像素，但#videoOne只有 250 像素 x 137.5 像素

在我的应用程序中，1280 * 720px视频的相同样式具有5px的额外功能。我创建的示例 html 有 3.5px 的额外内容。

我找不到额外的高度从何而来。有什么想法吗？

Answer 1

这是由于wrapperOne的行高。尝试添加此 css：

#wrapperOne{
line-height:0;
}

问候

Answer 2

这将解决您的问题。

在 CSS 和 #videoOne 块中进行此更改。

#videoOne {
width: 100%;
height: 100%;
outline: 1px solid cyan;
display: block;
}

Answer 3

我将您的代码复制到外部 jsfiddle 并进行了一些调查。似乎容器与

id=wrapperOne

在显示块中，以及视频元素造成了这个额外的空间。

Jsfiddle 附上，通过将其更改为显示 flex，我能够解决您的问题：

display: flex

而不是

display: block

这是视频元素容器的默认显示值。

享受