Indentation homogène des listes

Créer une liste

Élément de liste autonome

Tout d'abord, nous considérons l'élément de liste pur, non imbriqué dans une liste d'éléments. Lors de l'utilisation de l'élément HTML <li>, le navigateur définit la valeur de display sur list-item. Le fait que les éléments de liste non imbriqués dans une liste reçoivent un marqueur (également appelé « puce ») dépend du navigateur. Nous pouvons supprimer cette puce avec list-style-type: none.

li {
  border: 1px dashed red;
}
li:nth-of-type(n + 4) {
  list-style-type: none;
}

li {
  width: 15em;
}

<p>Puce par défaut selon le navigateur&nbsp;:</p>
<li>Un élément de la liste</li>
<li>Un élément de la liste</li>
<li>Un élément de la liste</li>
<p>Ces éléments de liste ont leurs puces supprimées&nbsp;:</p>
<li>Un élément de la liste</li>
<li>Un élément de la liste</li>
<li>Un élément de la liste</li>

Cette bordure rouge en pointillés représente les bords extérieurs de la zone de contenu de chaque élément de liste. À ce stade, les éléments de liste n'ont ni remplissage, ni bordures.

Éléments de liste imbriqués

Maintenant, nous les enveloppons dans un élément parent ; dans ce cas, nous les enveloppons dans une liste non ordonnée (c'est-à-dire <ul>). Selon le modèle de boîte CSS, les boîtes des éléments de liste doivent être affichées dans la zone de contenu de l'élément parent.

ul {
  border: 1px dashed blue;
}
li {
  border: 1px dashed red;
  list-style-type: none;
}

body {
  width: 15em;
}

<ul>
  <li>Un élément de la liste</li>
  <li>Un élément de la liste</li>
  <li>Un élément de la liste</li>
</ul>

La bordure bleue en pointillés nous montre les bords de la zone de contenu de l'élément <ul>. Cet élément parent est doté à la fois de marges et de remplissage. Les navigateurs appliquent les styles par défaut suivants aux listes non ordonnées :

ul {
  /* styles de l'agent utilisateur */
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  padding-inline-start: 40px;
}

Position par défaut des puces

Maintenant, nous remettons les marqueurs des éléments de liste à leur place. Puisqu'il s'agit d'une liste non ordonnée, les éléments de liste héritent des styles du navigateur list-style-type: disc;, qui sont des « puces » en cercles remplis, de leur parent <ul>.

li {
  border: 1px dashed red;
}
ul {
  border: 1px dotted blue;
}
ul:last-of-type {
  list-style-position: inside;
}

ul {
  width: 15em;
}

<p>C'est par défaut sur <code>list-style-position: outside</code>.</p>
<ul>
  <li>Un élément de la liste</li>
  <li>Un élément de la liste</li>
  <li>Un élément de la liste</li>
</ul>
<p>Ces listes ont <code>list-style-position: inside</code> défini.</p>
<ul>
  <li>Un élément de la liste</li>
  <li>Un élément de la liste</li>
  <li>Un élément de la liste</li>
</ul>

Visuellement, les marqueurs sont en dehors de la zone de contenu du <ul>, mais ce n'est pas la partie importante ici. Ce qui est essentiel, c'est que les marqueurs sont placés en dehors de la « boîte principale » des éléments <li>, et non du <ul>. Ils sont un peu comme des appendices des éléments de liste, suspendus en dehors de la zone de contenu du <li> mais toujours attachés au <li>.

C'est pourquoi, dans tous les navigateurs modernes, les marqueurs sont placés en dehors de toute bordure définie pour un élément <li> lorsque la valeur de list-style-position est par défaut ou définie explicitement sur outside. Lorsque nous l'avons changé en inside, les marqueurs ont été placés à l'intérieur du contenu du <li>, comme s'il s'agit d'une boîte en incise placée au tout début du <li>.

Indentation par défaut

Comme indiqué ci-dessus, tous les navigateurs fournissent à l'élément parent <ul> à la fois des marges et des remplissages. Bien que les CSS des agents utilisateurs diffèrent quelque peu, ils incluent tous :

ul,
ol {
  /* styles de l'agent utilisateur */
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  padding-inline-start: 40px;
}
ol {
  list-style-type: decimal;
}
li {
  display: list-item;
  text-align: match-parent;
}
::marker {
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  text-transform: none;
}

Tous les navigateurs définissent padding-inline-start à 40 pixels pour l'élément <ul> par défaut. Dans les langues de gauche à droite, comme le français, il s'agit du remplissage gauche. Tout remplissage défini dans les feuilles de style de l'auteur·ice (c'est-à-dire votre feuille de style) prévaut.

Si vous voulez être explicite, définissez ce qui suit dans vos feuilles de style pour vous assurer, sauf indication contraire, que les éléments de liste dans la zone de contenu principale de votre document, contenue dans la section <main>, sont correctement indentés :

:where(main ol, main ul) {
  margin-inline-start: 0;
  padding-inline-start: 40px;
}

Et imbriquez toujours vos éléments <li> dans un <ul> ou un <ol>.