导航栏和内容之间的空间

Question

我想摆脱内容和导航栏之间的空间，我该怎么做？请告诉我如何执行此操作，我是 css 和 html 的新手。我也尝试过在图像滑块上使用 wordpress，导航栏和图像滑块之间有空间，我如何摆脱它？先感谢您。

这是我的导航栏和内容的 html 代码。

   <nav class="navbar navbar-default navbar-top">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
            <span class="icon-bar" ></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <img class="img-responsive" src="images/brandz.png" >
    </div>

<div class="collapse navbar-collapse" id="nav-collapse">
    <ul class="nav navbar-nav">
        <li><a href="#">Students</a></li>
        <li><a href="#">Faculty</a></li>
        <li><a href="#">Contact us</a></li>

    </ul>

    <ul class="nav navbar-nav navbar-right">
                <li><a data-toggle="modal" href="#myModal" ><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                <!-- Modal -->
                    <div id="myModal" class="modal fade" role="dialog">
                        <div class="modal-dialog">
                <!-- Modal content-->
                         <div class="modal-content">
                             <div class="modal-header">
                                 <button type="button" class="close" data-dismiss="modal">&times;</button>
                             </div>
                             <div class="modal-body">
                                <p>Some text in the modal.</p>
                             </div>
                             <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                             </div>
                         </div>
                        </div>
                   </div>
    </ul>
  </div>
  </div>
  </nav>
  <div class="content">
 Pellentesque habitant morbi tristique senectus et netus et malesuada fames     ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor   sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
     </div>

这是我的 CSS

  .navbar-default .navbar-nav > li > a {
 font-weight: 590;
 color: #949494;
 display: block;
 padding: 5px 35px 2px 45px;
 border-bottom: 3px solid transparent;
 line-height: 97px;
 text-decoration: none;
 transition: border-bottom-color 0.5s ease-in-out;
 -webkit-transition: border-bottom-color 0.5s ease-in-out;
  }
.navbar-default{
background-color:#fff;

}
  .nav>li>a {
  position: relative;
  }
 .navbar-default .navbar-right > li > a {
 padding-left: 70px;
 padding-right: 1px;
 }
.navbar-default .navbar-toggle .icon-bar {
 background-color: #000000;
 margin:0 0 4px;
 width: 25px;
 height: 5px;

}
@media (max-width: 768px) {
.img-responsive{
 width: 300px;
 height:50px;
 padding-left:50px;
 }
 }
 @media (max-width: 376px) {
 .img-responsive{
 width: 220px;
 height:50px;
 padding-left: 20px;
}
}
@media (max-width: 286px) {
.img-responsive{
 width: 180px;
 height:50px;
 padding-left: 5px;
}
}
 .nav.navbar-nav > li{
 display: :inline-block;
  }
 .nav.navbar-nav{
  list-style-type:none;
  }
  .nav.navbar-nav > li > a:hover{
  color:#a92419;
  border-bottom-color: #a92419;
  }

.navbar-default .navbar-toggle .icon-bar {
 background-color:#a92419 ;
 margin:0 0 4px;
 width: 25px;
 height: 5px;

 }
 .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover            {
 background: none;
 }
 button.navbar-toggle{
 background:none;
 border:none;
 color:#000;

 }

原文由 nethken 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

.navbar-default { margin : 0 !important; }

原文由 0xdw 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

默认情况下，导航栏类的底部边距为 20px。这就是在导航栏区域下方创建空间的原因。您可以在自己的样式表中覆盖它。只需将其添加到您的 CSS 中：

 .navbar {margin-bottom: 0;}

您还可以在内容类上设置负边距，但这有点麻烦。

 .content {margin-top: -20px;}

祝你好运。

原文由 Khaled Allen 发布，翻译遵循 CC BY-SA 3.0 许可协议