无法弄清楚这个额外空间的来源

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

在视频元素上添加display：block：

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