html - 删除菜单和图像之间的空间

Question

有谁知道如何删除菜单顶部和页面顶部图像底部之间的空间。我试着用边距和填充来做到这一点。但这没有用。

This is a picture of the result I get now

@charset "UTF-8";
 body {
  background-color: #ADF1F5;
}
html,
body {
  margin: 0;
  padding: 0;
}
#Anouk {
  text-align: center;
  margin: 0 auto;
  padding: 0;
}
#header {
  height: 80px;
  background: #000000;
}
li {
  display: block;
  float: left;
}
li a {
  color: #FFFFFF;
  height: 80px;
}
#contact {
  float: right;
}

<div id="Anouk">
  <img src="logo/Hout.png" width="1000px" alt="Logo" />
</div>
<div id="header">
  <div id="menu">
    <!--Home-->
    <li id="home">
      <a href="index.html">
        <img src="Iconen/Home.png" height="80px" alt="home" onmouseover="this.src='Iconen/Home2.png'" onmouseout="this.src='Iconen/Home.png'" />
      </a>
    </li>
    <!--Over Mij-->
    <li id="over">
      <a href="over.html">
        <img src="Iconen/Over.png" height="80px" alt="home" onmouseover="this.src='Iconen/Over2.png'" onmouseout="this.src='Iconen/Over.png'" />
      </a>
    </li>
    <!--Portfolio-->
    <li id="portfolio">
      <a href="portfolio.html">
        <img src="Iconen/Portfolio.png" height="80px" alt="home" onmouseover="this.src='Iconen/Portfolio2.png'" onmouseout="this.src='Iconen/Portfolio.png'" />
      </a>
    </li>
    <!--Contact-->
    <li id="contact">
      <a href="contact.html">
        <img src="Iconen/Contact.png" height="80px" alt="home" onmouseover="this.src='Iconen/Contact2.png'" onmouseout="this.src='Iconen/Contact.png'" />
      </a>
    </li>
  </div>
</div>

Answer 1

尝试将 display:block 添加到最上面的图像。

#Anouk img{
    display: block;
}