1

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

0

Pesquise outras perguntas com a tag .