删除导航栏和图像之间的空间

Question

我在图像和导航栏之间有这个空间。我尝试使用margin-bottom：0导航栏和图像显示：但它并没有消失。我想摆脱图像和导航栏之间的空间，该怎么办？您还可以看到导航栏的代码段，以及该图像代码下的代码段。

.navbar {
  background-color: #ffffff;
  background-image: linear-gradient(135deg, #ffffff 0%, #ffc6c8 33%, #ffffff 66%, #ffc6c7 100%);
  margin-bottom: 0px;
}

.navbar-default {
  margin: 0;
}

<!--   Nav bar--------------------------------------------------------------------------------------------------------->
<section id="navigationBar">
  <nav class="navbar navbar-expand-lg  p-1.5" id="navbar">
    <a class="navbar-brand ml-5" id="navbar-brand" href="">
      <!--                <i class="fas fa-ice-cream nav-icon" style=" font-size: 35px;"></i>-->
      Recipe Pallate
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mx-auto simple-transition">
        <li class="nav-item " id="nav-item">
          <a class="nav-link" id="nav-link" href="#container">
                            Ingredients
                        </a>
        </li>
        <li class="nav-item " id="nav-item">
          <a class="nav-link" id="nav-link" href="#recipe">
                            Recipe
                        </a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            More Recipes
                        </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Vanilla</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Gellato</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Creamy</a>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</section>
<!--   Nav bar----------------------------------------------------------------------------------------------------------->

<section id="hero">
  <img src="photos/Creamy.jpg" width="84.7%" height="610" style="position: absolute;  z-index:0; display:block; margin-top:0px">

Answer 1

您应像这样附加padding:0;和box-sizing:border-box;：

*{
  padding:0;
  box-sizing:border-box;
}

如果它不适合您，则可以将padding-top用于项目导航

nav ul li a{
  padding-top:size number
}

Answer 2

需要重置的是您的UL

ul { padding: 0; margin: 0; }

或使用重置的CSS

html, body { padding:0; margin:0 }
.navbar {
  background-color: #ffffff;
  background-image: linear-gradient(135deg, #ffffff 0%, #ffc6c8 33%, #ffffff 66%, #ffc6c7 100%);
  margin-bottom: 0px;
}

.navbar-default {
  margin: 0;
}

ul { padding: 0; margin: 0; }

<!--   Nav bar--------------------------------------------------------------------------------------------------------->
<section id="navigationBar">
  <nav class="navbar navbar-expand-lg  p-1.5" id="navbar">
    <a class="navbar-brand ml-5" id="navbar-brand" href="">
      <!--                <i class="fas fa-ice-cream nav-icon" style=" font-size: 35px;"></i>-->
      Recipe Pallate
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mx-auto simple-transition">
        <li class="nav-item " id="nav-item">
          <a class="nav-link" id="nav-link" href="#container">
                            Ingredients
                        </a>
        </li>
        <li class="nav-item " id="nav-item">
          <a class="nav-link" id="nav-link" href="#recipe">
                            Recipe
                        </a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            More Recipes
                        </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Vanilla</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Gellato</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Creamy</a>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</section>
<!--   Nav bar----------------------------------------------------------------------------------------------------------->

<section id="hero">
  <img src="photos/Creamy.jpg" width="84.7%" height="610" style="position: absolute;  z-index:0; display:block; margin-top:0px">

Answer 3

要解决此类问题，您应该使用浏览器的检查功能，并检查可能导致此问题的填充和其他伪元素。我的直觉告诉我，有一个padding会添加这个空间，或者图像/部分可能有空白/边距，可能会导致空白。

PS，如果您可以在codesandbox.io或类似版本上重制它，将会很有帮助