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

video 要素に display:block を追加します。

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