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

我遇到了标题和导航栏之间的间隙问题，如图中所示。

已经解决了margin-bottom、vertical-align和position的问题，但不起作用。

<代码>函数MyFunction（）{var X=document.getElementById（“ nav ”）；console.log（baricon）如果（X.ClassName===“导航栏”）{X.ClassName+=“响应式”；var baricon=document.getElementsByClassName（' fa-bars '）[0]；baricon.ClassList.add（“ fa-times ”）；baricon.ClassList.remove（“ fa-bars ”）；}否则{Var closeIcon=document.getElementsByClassName（' fa-times '）[0]；closeIcon.ClassList.Remove（“ fa-times ”）；closeIcon.ClassList.Add（“ fa-bars ”）；X.ClassName=“导航栏”；}}

<代码>#徽标{背景：透明URL（“ images/airlineshq-logo.JPG ”）无重复滚动0%0%；宽度：1040px；高度：160px；边框：0；margin-bottom：0；}@仅媒体屏幕和（最大宽度：600px）{#徽标{宽度：100%；}}.导航栏{溢出：隐藏；背景色：#0000FF；}.导航栏A{浮动：左；显示：块；颜色：白色；文本对齐：居中；填充：14px 14px；文本修饰：无；字体大小：17px；高度：18px；}.活动{背景色：#0033CC；颜色：白色；}.导航栏.图标{显示：无；}.导航栏A：悬停，输入：悬停{背景色：#dddddd；颜色：黑色；}/*搜索框的CSS*/.navbar.search-box{浮子：右；位置：相对；顶部边距：3px；填充-右：30px；显示：Flex；}.navbar.search-box输入{填充：12px；边框：无；宽度：100%；高度：100%；填充：10px；}.navbar.search-box按钮{颜色：#999；边界：纳瓦约怀特；填充：10px；}@媒体屏幕和（最大宽度：600px）{.导航栏A，。navbar。search-box，.navbar.search-icon{显示：无；}.导航栏.图标{浮动：左；显示：块；}}@媒体屏幕和（最大宽度：600px）{.navbar.响应式{位置：相对；}.navbar.响应式.icon{位置：绝对；权利：0；顶部：0；}.navbar.响应式A{浮动：无；显示：块；文本对齐：左；}.navbar.响应式.search-box{浮动：无；显示：Flex；宽度：90%；填充率：4%；边框：2px纯黑色；}.navbar.响应式.search-icon{显示：Flex；}}

<代码><；DIV类=“内容”>；<；header ID=“ logo ”>；<；/header>；<；DIV类=“导航栏” ID=“导航”>；<；A HREF=“ https：//klia2.co ” CLASS=“ ACTIVE ”>；主页<；/A>；<；A href=“./Facilities/index.HTM ”>；设施<；/A>；<；A href=“./airlines/index.HTM ”>；航空公司办事处<；/A>；<；表单CLASS=“ search-box ”>；<；输入type=“ text ” placeholder=“ search.”>；<；Button type=“ Submit ” Class=“ Search-icon ”>；<；I Class=“ Fa Fa-Search ”>；<；/I>：<；/Button>：<；/窗体>；<；A HREF=“ JavaScript：void（0）；” CLASS=“ icon ” ONCLICK=“ myFunction（）”>；<；I CLASS=“ fa fa-bars ”>；<；/I>，<，/A>，<；/DIV>；

顺晟科技：

运行代码片段之后，我看到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; } }.

的标题样式有一个固定的<header>给人一种间隙的错觉，但它所做的一切都是要求它做的（高度为160px）。