响应式头部Logo与导航栏(Navbar)存在间隙，调整margin等属性无效求助

问题原因 #

这个间隙来自两个方面：一是浏览器默认给header、div这类块级元素预设了上下边距，你只给#logo设了margin-bottom:0，但没有覆盖导航栏的默认margin-top，也没有清掉全局的默认边距；二是空的header元素会因为默认行高产生额外的高度间隙。

修复方法 #

1. 首先加一段全局样式重置，统一消除所有元素的默认边距，避免后续再出现类似问题：

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

2. 调整#logo的样式，补充属性清除多余高度：

#logo {
  background: transparent url("images/airlineshq-logo.jpg") no-repeat scroll 0% 0%;
  width: 1040px;
  height: 160px;
  border: 0;
  margin-bottom: 0;
  /* 新增内容 */
  margin: 0;
  padding: 0;
  display: block;
  line-height: 0;
}

3. 给导航栏添加上边距清零设置：

.navbar {
  overflow: hidden;
  background-color: #0000ff;
  /* 新增内容 */
  margin-top: 0;
}

其他小问题修复 #

你提供的JS代码里第一行console.log(barIcon)执行时，barIcon还没有被定义，会在控制台抛出未定义错误，删除这行代码即可。

内容的提问来源于stack exchange，提问作者sexy18