navbar与carousel上下有个空白，如何取消

Question

如上图，上面的黑色是固定在上面的导航条，下面的祥云是个图片轮播，他们之间有个空白，如何取消掉?使用自定义的CSS都没有效果，求各位帮助啊。

下面是代码：

<nav class="navbar navbar-static-top navbar-inverse" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div>
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">iOS</a></li>
         <li><a href="#">SVN</a></li>
      </ul>
   </div>
</nav>
<div id="myCarousel" class="carousel slide" style="background-color: gray;">
  
   <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
   </ol>   


   <div class="carousel-inner">
      <div class="item active">
         <img src="img/11.jpg" class="col-sm-offset-3">
         <div class="carousel-caption">标题 1</div>
      </div>
      <div class="item">
         <img src="img/22.jpg"  class="col-sm-offset-3">
         <div class="carousel-caption">标题 2</div>
      </div>
      <div class="item">
         <img src="img/33.jpg" alt="Third slide" class="col-sm-offset-3">
         <div class="carousel-caption">标题 3</div>
      </div>
   </div>
   <a class="carousel-control left" href="#myCarousel" 
      data-slide="prev">&lsaquo;</a>
   <a class="carousel-control right" href="#myCarousel" 
      data-slide="next">&rsaquo;</a>
</div> 

Answer 1

自己加个样式覆盖 bootstrap 的

.navbar {

min-height: 30px;

margin-bottom: 0;

border-radius: 0;

}

Answer 2

用chrome或火狐浏览器打开这个页面，用审查元素来看到底是什么导致了这个空白。