1
resposta

Estitlizando o footer

Para separar os itens da lista, eu posso utilizar o gap na classe rodape__lista, como fiz a abaixo?

.rodape__lista{ display: flex; list-style-type: none; justify-content: center; gap: 10px; margin-top: 1em; }

1 resposta

Olá, Italo!

Sim, você está correto! A propriedade CSS gap é uma maneira eficiente de criar espaçamento entre os itens de uma lista quando você está usando display: flex ou display: grid.

A propriedade gap define o tamanho da linha e coluna entre as linhas/colunas de um contêiner flex ou grid. No seu caso, você está criando um espaço de 10px entre cada item da sua lista.

Aqui está um exemplo prático de como funciona:

.rodape__lista{
    display: flex;
    list-style-type: none;
    justify-content: center;
    gap: 10px; /* Isso cria um espaço de 10px entre cada item da lista */
    margin-top: 1em;
}

E no HTML, teríamos algo como:

<ul class="rodape__lista">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Nesse exemplo, haverá um espaço de 10px entre "Item 1", "Item 2" e "Item 3".

Espero ter ajudado e bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software