刪除菜單和圖像之間的空間

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