0

I'm having a problem in a really simple design. As you can see in the image, there is a white gap between the nav and the top of the page. Do you have ANY Idea why is this happening? I tryied to set the padding and margin to 0 as you can see, but it is still not working. 

body {
    font: 13px/1.6em "Helvetica Neue", Helvetica, Arial, sans-serif;
 padding:0;
 margin:0;
 border:0;
}
@font-face{
 font-family: "JMH Typewriter dry";
 font-weight: bold;
 src: url("Fonts/JMH Typewriter dry.otf");
}
nav li{
 display:inline;
 font-size: 20px;
}
nav li a{
 text-decoration:none;
 font-family: "JMH Typewriter dry";
 color: black;
}
nav{
 background-image: url("https://img.freepik.com/free-vector/elegant-green-geometric-polygon-background_1035-13146.jpg?size=338&ext=jpg");
}
<!DOCTYPE HTML>
<html>
<head> 
<link rel="stylesheet" href="style.css">
<title> Home Page </title></head>
<body>
<nav> 
<ul>
<li><a href "index.html"> <img src="https://i.imgur.com/L7LNe0P.png"/> Home Page </a></li>
<li><a href="about.html"> <img src="https://i.imgur.com/L7LNe0P.png"/> About </a></li>
<li><a href="media.html"><img src="https://i.imgur.com/L7LNe0P.png"/>  Media </a></li>
</ul>
</nav>
</body>
</html>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Lavi Arzi
  • 99
  • 2
  • 10

2 Answers2

1

Because the ul itself has a margin by default as well:

body {
  font: 13px/1.6em "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 0;
  margin: 0;
  border: 0;
}

@font-face {
  font-family: "JMH Typewriter dry";
  font-weight: bold;
  src: url("Fonts/JMH Typewriter dry.otf");
}

nav ul {
  margin: 0;
}

nav li {
  display: inline;
  font-size: 20px;
}

nav li a {
  text-decoration: none;
  font-family: "JMH Typewriter dry";
  color: black;
}

nav {
  background-image: url("https://img.freepik.com/free-vector/elegant-green-geometric-polygon-background_1035-13146.jpg?size=338&ext=jpg");
}
<nav>
  <ul>
    <li>
      <a href "index.html"> <img src="https://i.imgur.com/L7LNe0P.png" /> Home Page </a>
    </li>
    <li>
      <a href="about.html"> <img src="https://i.imgur.com/L7LNe0P.png" /> About </a>
    </li>
    <li>
      <a href="media.html"><img src="https://i.imgur.com/L7LNe0P.png" /> Media </a>
    </li>
  </ul>
</nav>
lumio
  • 7,428
  • 4
  • 40
  • 56
0

The unordered list <ul> you're using is given a margin by the browser automatically. You can override this behaviour by adding the following CSS rule:

nav ul {
    margin: 0;
}
moritzg
  • 4,266
  • 3
  • 37
  • 62