CODEWITHSUNDEEP
htmlcss
Anoux
Anoux

Reputation: 47

Removing space between menu and image

Does anyone know how I can remove the space between the top of my menu and the bottom of the image on top of the page. I tried to do it with margin and padding. But that didn't work.

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>

Upvotes: 0

Views: 33

Answers (2)

Dejan Munjiza
Dejan Munjiza

Reputation: 798

Here is a solution: https://jsfiddle.net/egjbmp1u/

For your #header style you need to add:

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

Also, #Anouk style should look like this:

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

#Anouk img {
    margin: 0 auto;
}

Upvotes: 0

Ranjana
Ranjana

Reputation: 825

Try to add display:block to your top most image.

#Anouk img{
    display: block;
}

Upvotes: 1

Related Questions