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