Wie kann ich diesen Abstand zwischen Elementen entfernen?

Question

Hallo ich auf meiner Web-Projekt arbeiten Bootstrap mit 3.3.7

Hier ist mein HTML-Code Beispiel:

<nav class="navbar navbar-default nobottommargin" role="navigation"> 
    <div class="container-fluid"> 

     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Brand</a> 
     </div> 

     <div class="collapse navbar-collapse" id=""> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#">Link</a></li> 
       <li><a href="#">Link</a></li> 
      </ul> 
     </div> 

    </div> 
</nav> 

<iframe src="https://www.news.sky.com" style="width:100%;height:100%" frameborder="3"></iframe> 

Und hier ist JSFiddle arbeiten.

Wie Sie im Beispiel sehen können, ist zwischen der Navigationsleiste und dem Rahmen etwas Platz.

Wie kann ich diesen Speicherplatz entfernen? Und wie kann ich Iframe-Element in der Nähe von Navbar machen?

Answer 1

Es ist keine gute Praxis vordefinierte Bootstrap-Stile zu ändern, auch !important verwenden.

Sie müssen nur negativen margin-top für iframe setzen:

iframe { 
    margin-top: -20px; 
}