[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.

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

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.