09.02.2025

Definindo Espaçamento Vertical Entre Itens de Lista em HTML

Resposta Rápida

Para criar espaço vertical entre os itens da lista, você pode usar a propriedade CSS margin aplicada aos elementos \u003cli\u003e:

/* Lembre-se do que sua mãe costumava dizer: "Não esqueça do espaço!" */
li { margin-bottom: 10px; }

Esse trecho de CSS fornecerá uma margem de 10 pixels abaixo de cada item da lista. Sinta-se à vontade para ajustar esse valor conforme suas necessidades.

Pulando a Última Margem: A Magia das Pseudo-Classes

Nossa resposta rápida aborda eficazmente a questão, mas em alguns casos, não queremos uma margem após o último item da lista. Nesses casos, a pseudo-classe CSS :not() é útil:

/* Fazendo o último item saber: "Você não é tão especial assim!" */
li:not(:last-child) { margin-bottom: 10px; }

Outra opção é usar o seletor adjacente para alcançar um resultado semelhante:

/* Excluindo o último item da lista */
li + li { margin-top: 10px; }

Auxiliar de Depuração: Borda Visual

Durante o desenvolvimento, pode ser útil visualizar os tamanhos das margens. Para esses fins, você pode adicionar uma borda temporária:

/* Vermelho é a cor para depuração */
li { border: 1px solid red; margin-bottom: 10px; } 

Certifique-se de remover as bordas assim que as margens forem refinadas ao seu gosto.

Espaçamento: O Herói Silencioso

A propriedade line-height também desempenha um papel importante na avaliação da impressão visual da lista. Ela permite um ajuste fino do espaço entre as linhas dentro dos elementos:

/* Como dizem os especialistas: "Dê um respiro ao texto" */
li { line-height: 1.6; }

Um line-height adequadamente definido, combinado com margin, tornará sua lista mais visualmente atraente.

Visualização

Vamos visualizar como o margin funciona entre os itens da lista:

Item 1 🚶‍♂️ 
|
10px de margem
|
Item 2 🚶‍♂️  
|
Mais 10px de margem
|
Item 3 🚶‍♂️ 

O símbolo | aqui representa o espaço vertical controlado pelo margin, que proporciona uma "percepção" suave da lista.

Compatibilidade com Navegadores Legados: Lembrando os Antigos

Se você precisar trabalhar com navegadores legados, pode ser necessário usar JavaScript como alternativa:

/* Quando o CSS é muito novo para navegadores antigos */
if ( /* condição checando por navegador antigo */ ) {
  var listItems = document.querySelectorAll('li');
  for (var i = 0; i < listItems.length - 1; i++) {
    listItems[i].style.marginBottom = '10px';
    /* Cadê nosso confiável JavaScript? */
  }
}

No entanto, sempre busque alcançar o resultado desejado por meio do CSS, deixando o JavaScript para outras tarefas.

Espaço Após a Lista: Importante para a Harmonia

Não se esqueça de considerar o espaço após a lista – isso ajudará o texto e o design a interagirem de forma eficaz.

/* E finalmente... é hora de relaxar! */
ul { margin-bottom: 20px; }

Margens balanceadas podem criar um ritmo visual agradável no seu conteúdo.

Recursos Úteis

1. CSS Margin — Aprofunde-se no tópico de criação de espaço ao redor dos elementos.
2. CSS Padding — Explore todas as nuances do espaçamento interno dos elementos.
3. list-style - CSS: Cascading Style Sheets | MDN — Tudo sobre estilização de listas em CSS.
4. list-style | CSS-Tricks - CSS-Tricks — Um guia prático para gerenciar a aparência das listas.
5. The box model - Learn web development | MDN — Entendendo o modelo de caixa em CSS.
6. Rendering performance | Articles | web.dev — Aprimorando a performance do CSS.

Video

Navigation