O código abaixo é de uma simples barra de navegação, o problema dela é que existe um espaço em branco entre o menu e o topo do navegador.
Encontrei 2 soluções, alterar o seletor body
para *
no arquivo css ou adicionar margin: 0;
no seletor nav ul {
ficando desta maneira:
nav ul {
margin: 0;
list-style: none;
text-align: right;
background: black;
}
Qual seria a solução mais apropriada e por que isso acontece? Afinal, eu já defini a tag body
com 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;
}