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

Question

有谁知道我如何删除菜单顶部和页面顶部图像底部之间的空间。我尝试用margin和padding来做。但那没用。

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;
}

Answer 2

这是一个解决方案：https://jsfiddle.net/egjbmp1u/

对于#header样式，您需要添加：

position: relative;
float: left;
width: 100%;

此外，＃Anouk风格应如下所示：

#Anouk {
    display: flex;
    text-align: center;
    padding: 0;
}

#Anouk img {
    margin: 0 auto;
}