余分な空白を取り除く方法ブートストラップのビデオ

Question

私はビデオをページに埋め込んでいますが、メニューとビデオの間に空白があります。写真に示すように。 （注：REDカラーはホワイトスペースを意味します）、次のように

は私のコードは次のとおりです。 -

#media { 
 
    margin-left: 0px; 
 
    margin-right: 0px; 
 
    background-color: red; 
 
    padding-right: 3.5%; 
 
    padding-left: 3.5%; 
 
    padding-top: 0px; 
 
}

<div id="media"> 
 
    <div class="embed-responsive embed-responsive-16by9"> 
 
     <video autoplay loop class="embed-responsive-item"> 
 
      <source src="Media/video.mp4" type="video/mp4"> 
 
     </video> 
 
    </div> 
 
</div>

どのように私は余分な白のスペースを削除することができます。事前に

感謝....

Answer 1

あなたのメニューが<nav>タグ内にある場合、たとえば、あなたはあまりにもそれを確認する必要があります。

1. トップパディング/マージンビデオコンテナから：スペースが原因の2つの考えられる理由を作成していることを

   。

2. メニューコンテナの底部の余白/マージン。

ヒント：

1. 右メニューにそれが（通常はあなたが<ul>、<nav>または<div>メニューコードを含むをチェックしたい一番下のパディングやマージンを加えています
2. 参照]をクリックし、検査
3. 出力が好きなものになるまで値を編集してください。
4. これらのCSSスタイルを.cssファイルにコピーしてください。プロジェクトでF5キーを押します。
あなたのコードを知っているか、使用可能なplunkrを持つことなく、迅速な解決にはなり

：

.nav#myMenu { 
    padding-bottom: 0!important; 
    margin-bottom: 0!important; 
} 

#video { 
    padding-top: 0!important; 
    margin-top: 0!important; 
} 

!important文のCSSルールは、インラインスタイルやルールのような優先順位が高いです他のスタイルをオーバーライドするために使用された後、これはあなたのコードの中に来ます。