オーバーレイ部門の下部に余分なスペースができないようにするにはどうすればよいですか？

Question

私のウェブサイトにHTML5ビデオがありますが、そこにクールな色を加えたdivでオーバーレイされていますが、何らかの理由でそれが私のウェブサイトの次のセクションとの間に余分なスペースを作成します（参考のため画像参照）

あなたが紫っぽいオーバーレイと黄色の部分との間に小さな隙間があります見ることができるように、基本的に、オーバーレイは動画に適応されていません。

HTML：

<div id="vid-overlay"></div> 
    <div class="vid-container"> 
    <video autoplay loop> 
     <source src="video/Hello-World2.mp4" type="video/mp4"></source> 
     <source src="video/Hello-World2.webm" type="video/webm"></source> 
     </video> 
    </div> 

CSS：

video{ 
    width:100%; 
    height:auto; 
    display:block; 
    float:left; 
    margin:0; 
    padding:0; 
} 

#vid-overlay{ 
background: rgba(96,80,99,1); 
background: -moz-linear-gradient(top, rgba(96,80,99,1) 0%, rgba(96,80,99,0.51) 100%); 
background: -webkit-gradient(left top, left bottom, color-stop(0%, 
    position:absolute; 
    margin:0; 
    padding:0; 
    width:100%; 
    height:100%; 
} 

Answer 1

がposition:absolutevid-overlay divの中にあなたの要件のために必要です。

お試しください：position:relative。 オーバーレイエラーを解決する可能性があります。

Answer 2

ビデオタグのデフォルトはインラインブロックです。あなたはそれがこのようなブロック要素として表示させる必要があります。

video {display: block;}