Html 导航栏和内容之间的间距

我想消除内容和导航栏之间的空间，我该怎么做？请告诉我如何做到这一点，我是新的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>

---

尝试将内容类的边距设置为零。

.navbar默认值{margin:0！重要；}

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

.navbar {margin-bottom: 0;}

你也可以在content类上设置一个负的边距，但这有点像黑客

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

祝你好运。

好的，对于其他可能的人来说，他们只是在寻找一个可能的答案。我不一定完全按照我想要的方式解决问题，我相信还有其他解决方案，但对我来说，这就是有效的方法：

1） 转到外观>编辑器

2） 点击“主题功能”

3） 查找名为mbe_wp_head（）的函数，并查找如下所示的行：

    .'body{ padding-top: 42px !important; }'

并将padding top属性更改为适合您的设计的任何属性

---

我知道，这可能不是最好的解决方案，也可能不适用于所有人（就我个人而言，我使用的是a引导主题），但它对我有效，如果我找到更好的，我会发布它。

对我来说，空间是由

标记引起的。然后我将

更改为

标记并更改了字体大小。这帮助我消除了导航栏和页面内容之间的空间。

在bootstrap 4中，向导航栏添加了一个新的mb-3类（参见最后一个类）

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

---

这增加了底部的边距。有关更多详细信息，请参阅。我刚刚删除了该类。

.navbar默认值{margin:0！important；}

如何将您的答案标记为正确答案？

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">