---
title: "[CSS] Ajouter un espace entre les éléments d’une liste"
description: "Par défaut, les éléments d’une liste s’enchaînent sans séparation visuelle. Il est possible d’ajouter un séparateur pour améliorer la lisibilité et structurer le contenu. ## Contenu avancé Cet article utilise du CSS. Une mauvaise manipulation peut impacter l’affichage des listes…"
url: "https://academy.drgeek.com/docs/avance/divi-code/css-ajouter-un-espace-entre-les-elements-dune-liste/"
updated: "2026-03-19"
category: Avancé / Divi (code)
tags:
  - Avancé
---

# [CSS] Ajouter un espace entre les éléments d’une liste

Par défaut, les éléments d’une liste s’enchaînent sans séparation visuelle. Il est possible d’ajouter un séparateur pour améliorer la lisibilité et structurer le contenu.

## Contenu avancé

Cet article utilise du CSS. Une mauvaise manipulation peut impacter l’affichage des listes sur votre site.

## Objectif

Ajouter une séparation visuelle entre les éléments d’une liste.

## Solution avec CSS

Ajoute le code suivant dans le CSS personnalisé du site :

```
ul li {
  border-bottom: 1px solid #ddd;
  padding: 8px 0;
}

ul li:last-child {
  border-bottom: none;
}
```

## Comprendre le fonctionnement

- **border-bottom** ajoute une ligne sous chaque élément
- **padding** crée de l’espace pour améliorer la lisibilité
- **:last-child** évite d’afficher une ligne sur le dernier élément

## Personnaliser le style

Tu peux adapter le séparateur selon ton design :

- Couleur : `#E02B20` pour rester cohérent avec le site
- Épaisseur : `2px` pour un effet plus marqué
- Style : `dashed` ou `dotted`

## Limiter à une zone spécifique

Pour éviter d’impacter toutes les listes du site, utilise une classe dédiée :

```
.custom-list li {
  border-bottom: 1px solid #ddd;
  padding: 8px 0;
}

.custom-list li:last-child {
  border-bottom: none;
}
```

## Points d’attention

- Ce code s’applique à toutes les listes si non ciblé
- Un séparateur trop visible peut alourdir le design
- Vérifie le rendu sur mobile

## Astuce utile

Utilise des séparateurs discrets pour améliorer la lecture sans surcharger visuellement la page.

## Compatibilité

Cette méthode fonctionne sur tous les navigateurs modernes et ne dépend pas du thème utilisé.

## Pour conclure

Ajouter un séparateur est une solution simple pour structurer une liste et améliorer la lisibilité du contenu.