1
The code below is from a simple navigation bar, the problem is that there is a blank space between the menu and the top of the browser.
I found 2 solutions, change the selector body for * in the css file or add margin: 0; on the selector nav ul { staying that way:
nav ul {
margin: 0;
list-style: none;
text-align: right;
background: black;
}
What would be the most appropriate solution and why does this happen? After all, I have already defined the tag body with margin: 0;
HTML
<body>
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">SOBRE</a></li>
<li><a href="#">PORTIFÓLIO</a></li>
<li><a href="#">CONTATO</a></li>
</ul>
</nav>
</body>
CSS
body {
margin: 0;
padding: 0;
font-family: 'arial';
}
nav ul {
list-style: none;
text-align: right;
background: black;
}
nav li {
padding: 10px 0 10px 0;
display: inline-block;
}
nav a {
color: white;
text-decoration: none;
padding: 0 25px 0 25px;
}