如何消除导航栏和特色图片之间的这种不需要的间隙？ [复制]答案

【问题标题】：How do i remove this unwanted gap between my navabar and featured image? [duplicate]如何消除导航栏和特色图片之间的这种不需要的间隙？ [复制]
【发布时间】：2023-04-10 21:34:01
【问题描述】：

我正在使用引导程序创建网站，但在创建具有视差效果的特色图像时遇到了问题。似乎有什么东西在导航栏 (Bootstrap) 和特色图片之间创建了一个空间。

.parallax {
background-image: url("../images/aboutHeader.jpg");
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.parallax h2 {
color: white;
font-size: 4em;
text-align: center;
padding-top: 100px;
}


<!-- NAVBAR
    ================================================== -->
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">
          <img src="images/headerWhite.png" alt="Bird's Aerial Imaging LC" style="height:100%">
        </a>
      </div>
      <div class="collapse navbar-collapse navbar-right" id="myNavbar">
        <ul class="nav navbar-nav">
          <li><a href="#">Home</a></li>
          <li class="active"><a href="#">About</a></li>
          <li><a href="#">Gallery</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- FEATURED IMAGE =============================================================== -->
  <section style="height:250px;">
    <div class="parallax">
      <h2>About Us</h2>
    </div>
  </section>

【问题讨论】：

标签： css html twitter-bootstrap

【解决方案1】：

您可以将position:absolute; top:0; 添加到您的部分标签。那肯定会删除空间...

这也可能是因为该部分周围的默认边距或填充。尝试在其中添加margin:0; padding:0;

【讨论】：

【解决方案2】：

我从您那里了解到，您的意思是视差 div 和导航栏之间的白色垂直空间，我的回答将取决于此，如果您的问题不同，请告诉我。

您的解决方案就是删除：

1) "h2" 中的 margin 属性：

.parallax h2 {
  margin-top: 0;
}

2) 来自“导航栏”的 padding 属性：

.navbar {
  padding-bottom: 0;
}

希望它对你有用！

【讨论】：