Comment définir l'espace vertical entre les éléments d'une liste ?

Question

Dans un délai de <ul> il est clair que l'espacement vertical entre les lignes peut être formaté à l'aide de l'attribut line-height.

Ma question est la suivante : dans le cadre d'une <ul> Comment définir l'espacement vertical entre les éléments de la liste ?

Answer 1

Vous pouvez également utiliser la propriété line-height de la balise ul

ul {
  line-height: 45px;
}

div {
  border: 2px solid black;
}

<div>
  <ul>
    <li>line one</li>
    <li>line two</li>
    <li>line three</li>
  </ul>
</div>

Answer 2

Pour l'appliquer à une liste entière, utilisez

ul.space_list li { margin-bottom: 1em; }

Ensuite, dans le html :

<ul class=space_list>
<li>A</li>
<li>B</li>
</ul>

Answer 3

Utiliser la grille CSS sur le parent ul comme suit :

ul {
  display: grid;
  gap: 10px;
}

Answer 4

Souvent, lorsque vous produisez des messages électroniques en HTML, vous ne pouvez pas utiliser de feuilles de style ou de blocs de style. Toutes les feuilles de style doivent être en ligne. Dans le cas où vous souhaitez ajuster l'espacement entre les puces, j'utilise li style="margin-bottom:8px ;" dans chaque puce. Personnalisez la valeur des pixels à votre convenance.

Answer 5

J'ai constaté qu'il était beaucoup plus facile pour moi de créer un espacement après les éléments de la liste en ajoutant margin-bottom aux listes ordonnées et aux listes non ordonnées dans leur ensemble plutôt qu'aux éléments individuels de la liste.

<ol style="line-height: 1.5em; margin-bottom: 15px">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ol>

<ul style="line-height: 1.5em; margin-bottom: 15px">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>