我在图像和导航栏之间有这个空间。我尝试使用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">
答案 0 :(得分:0)
您应像这样附加padding:0;
和box-sizing:border-box;
:
*{
padding:0;
box-sizing:border-box;
}
如果它不适合您,则可以将padding-top用于项目导航
nav ul li a{
padding-top:size number
}
答案 1 :(得分:0)
需要重置的是您的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">
答案 2 :(得分:-1)
要解决此类问题,您应该使用浏览器的检查功能,并检查可能导致此问题的填充和其他伪元素。我的直觉告诉我,有一个padding
会添加这个空间,或者图像/部分可能有空白/边距,可能会导致空白。
PS,如果您可以在codesandbox.io或类似版本上重制它,将会很有帮助