html - 无法弄清楚这个额外的空间来自哪里

Question

我有一个视频和一个用于该视频的容器。但是，我无法将容器完全包裹在视频周围。我将容器背景设为白色，以清楚地显示它太大的地方。我需要正确包装的原因是因为我有一组视频控件现在位于包装结束的视频下方。

这是我编写的 CSS，我已经尝试了很多东西，但我就是想不通:

#video_container{
    -webkit-box-flex: 1; 
    -moz-box-flex: 1;
    border:2px solid blue;
    margin: 20px;
    padding: 0px;
    width:100%;
    height:100%;
    position: relative;
    background-color:white;
}
#video_container video{
    width:100%;
    height:auto;
    padding: 0px;
    margin: 0px;
}
#video_container:hover #controls {
    opacity: 0.7;
    padding: 0px;
    margin: 0px;
}

这是容器的 HTML:

<div id="video_container">
    <video id="trailers">
        <source src="vLast.mp4" type="video/mp4">
        <source src="vLast.webm" type="video/webm">
    </video>
    <nav>
       <div id="controls">
            <button id="playButton">Play</button>      
            <div id="defaultBar">
                <div id="progressBar"></div>
            </div>
            <button id="vol" onclick="level()">Vol</button>
            <button id="mute">Mute</button>
            <button id="full" onclick="toggleFullScreen()">Full</button>
        </div> 
       <div id="playlist">
            <div>cats</div>
            <div>cats</div>
            <div>cats</div>
        </div>
    </nav>
</div>

Answer 1

在视频元素上添加显示: block :

    #video_container video{
        width:100%;
        height:auto;
        padding: 0px;
        margin: 0px;
        display:block;
 }