徽标头和菜单之间的间隙

Question

尝试创建一个具有响应式徽标和菜单的新标题。经过几次咨询和stackoverflow专家的建议，现在一切看起来都很好。

我有问题与标题和导航条之间的差距附加在图像。

可以设置margin-bottom, vertical align和position，但都不起作用。

function myFunction() {
var x = document.getElementById("nav");
console.log(barIcon)
if (x.className === "navbar") {
x.className += " responsive";
var barIcon = document.getElementsByClassName('fa-bars')[0];
barIcon.classList.add("fa-times");
barIcon.classList.remove("fa-bars");
} else {
var closeIcon = document.getElementsByClassName('fa-times')[0];
closeIcon.classList.remove("fa-times");
closeIcon.classList.add("fa-bars");
x.className = "navbar";
}
}

#logo {
background: transparent url("images/airlineshq-logo.jpg") no-repeat scroll 0% 0%;
width: 1040px;
height: 160px;
border: 0;
margin-bottom: 0;
}
@media only screen and (max-width: 600px) {
#logo {
width: 100%;
}
}
.navbar {
overflow: hidden;
background-color: #0000ff;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 14px;
text-decoration: none;
font-size: 17px;
height: 18px;
}
.active {
background-color: #0033CC;
color: white;
}
.navbar .icon {
display: none;
}
.navbar a:hover,
input:hover {
background-color: #dddddd;
color: black;
}

/* CSS for search box */
.navbar .search-box {
float: right;
position: relative;
margin-top: 3px;
padding-right: 30px;
display: flex;
}
.navbar .search-box input {
padding: 12px;
border: none;
width: 100%;
height: 100%;
padding: 10px;
}
.navbar .search-box button {
color: #999;
border: navajowhite;
padding: 10px;
}
@media screen and (max-width: 600px) {
.navbar a,
.navbar .search-box,
.navbar .search-icon {
display: none;
}
.navbar a.icon {
float: left;
display: block;
}
}
@media screen and (max-width: 600px) {
.navbar.responsive {
position: relative;
}
.navbar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
.navbar.responsive .search-box {
float: none;
display: flex;
width: 90%;
padding: 4%;
border: 2px solid black;
}
.navbar.responsive .search-icon {
display: flex;
}
}

<div class="content">
<header id="logo"></header>
<div class="navbar" id="nav">
<a href="https://klia2.co" class="active">Home</a>
<a href="../facilities/index.htm">Facilities</a>
<a href="../airlines/index.htm">Airlines Offices</a>
<form class="search-box">
<input type="text" placeholder="Search..">
<button type="submit" class="search-icon"><i class="fa fa-search"></i></button>
</form>
<a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a>
</div>

Answer 1

运行代码段后，我没有看到<header>和<div class="navbar">之间的差距。

标题样式在#logo有一组height: 160px;，这给了一个间隙的错觉，但它所做的一切，是它被要求做的(有160px的高度)。