So entfernen Sie zusätzliche Leerzeichen surronding Video in Bootstrap

Question

Ich bin ein Video in die Seite eingebettet, aber es ist Leerraum zwischen Menü und Video. wie in Bild gezeigt. (HINWEIS: ROT Farbe bedeutet, weißen Raum)

mein Code ist wie folgt: -

#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>

wie kann ich die extra weiß Abstand entfernen.

Dank im Voraus ....

Answer 1

Wenn Ihr Menü innerhalb <nav>-Tag ist, zum Beispiel, dann müssen Sie das auch überprüfen.

Dieser Raum wegen zwei mögliche Gründe erstellt:

1. Top padding/Marge von Ihrem Video-Container.
2. Unterer Rand/Rand von Ihrem Menübehälter.

. Tipp:

1. Rechts klicken und überprüfen Sie das Menü
2. Sehen Sie, wo es unten Polsterung oder Marge Zugabe (in der Regel wollen Sie <ul>, <nav> oder <div> mit dem Menü-Code überprüfen
3. Bearbeiten Sie die Werte, bis die Ausgabe die gewünschte ist
4. Kopieren Sie diese CSS-Stile in Ihre .css-Datei le in Ihrem Projekt und drücken Sie F5.

Eine schnelle Lösung, ohne den Code zu kennen oder ein plunkr zur Verfügung zu haben wäre:

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

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

Die !important Anweisung nach der CSS-Regel für das Überschreiben andere Stile verwendet wird, die eine höhere Priorität wie Inline-Styles oder Regeln das kommt nach diesem in deinem Code.