css - 删除导航和标题之间的小间隙

Question

我的导航栏(位于页面顶部)和标题(在导航栏下方，上面有一个大图像和一个文本)，它们之间有一个很小的间隙，我想移除。我访问过许多关于类似问题的帖子，并尝试了他们的解决方案，但似乎对我不起作用，包括:display: block; margin :0; e.t.c.

我想这与我在标题内容或导航内容上应用的样式有关。

body {
  margin: 0px;
  padding: 0px;
  background-color: #f2f2f2;
}
html {
  margin: 0px;
  padding: 0px;
}
#logo {
  height: 50px;
  width: auto;
  float: left;
}
nav ul {
  list-style-type: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-color: #1a1a1a;
  text-align: center;
  border: 1px solid #e7e7e7;
  display: inline-block;
  width: 100%;
}
nav li {
  display: inline-block;
}
nav a {
  display: inline-block;
  padding: 16px 15px;
  text-decoration: none;
  font-family: arial;
  font-weight: bold;
  color: white;
}
nav a:hover {
  background-color: orange;
  color: white;
}
nav {
  margin-bottom: 0;
}
header {
  margin-top: 0;
  margin-bottom: 10px;
  width: 100%;
  font-family: arial;
  font-size: 18px;
  color: orange;
}
h1 {
  position: absolute;
  top: 150px;
  width: 100%;
  z-index: 1;
  text-align: center;
}
#bannerImage {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 0;
}

<nav>
  <ul>
	<img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif"/>
	<li><a href="Game1.html" id="myBtn" onclick="disableLink()" >Game 1</a></li><li><a href="">Game 2</a></li><li><a href="">Game 3</a></li>
  </ul>
</nav>
	
<header>
  <img id="bannerImage" src="http://static2.hypable.com/wp-content/uploads/2014/09/Hogwarts-lake.png"/>
  <h1>Games</h1>
</header>

Answer 1

定义nav的高度即可

body {
  margin: 0px;
  padding: 0px;
  background-color: #f2f2f2;
}
html {
  margin: 0px;
  padding: 0px;
}
#logo {
  height: 50px;
  width: auto;
  float: left;
}
nav ul {
  list-style-type: none;
  overflow: hidden!important;
  margin: 0;
  padding: 0;
  background-color: #1a1a1a;
  text-align: center;
  border: 1px solid #e7e7e7;
  display: inline-block;
  width: 100%;
}
nav li {
  display: inline-block;
}
nav a {
  display: inline-block;
  padding: 16px 15px;
  text-decoration: none;
  font-family: arial;
  font-weight: bold;
  color: white;
}
nav a:hover {
  background-color: orange;
  color: white;
}
nav {
  margin-bottom: 0;
  height: 51px;
}
header {
  margin-top: 0;
  margin-bottom: 10px;
  width: 100%;
  font-family: arial;
  font-size: 18px;
  color: orange;
}
h1 {
  position: absolute;
  top: 150px;
  width: 100%;
  z-index: 1;
  text-align: center;
}
#bannerImage {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 0;
}

<nav>
  <ul>
	<img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif"/>
	<li><a href="Game1.html" id="myBtn" onclick="disableLink()" >Game 1</a></li><li><a href="">Game 2</a></li><li><a href="">Game 3</a></li>
  </ul>
</nav>
	
<header>
  <img id="bannerImage" src="http://static2.hypable.com/wp-content/uploads/2014/09/Hogwarts-lake.png"/>
  <h1>Games</h1>
</header>