时间戳

首页 > 解决方案 > 删除导航栏和图像之间的空间

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

问题描述

我在图像和导航栏之间有这个空间。我尝试使用 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">

标签： htmlcss

解决方案

需要重置的是你的 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">

推荐阅读