Propriété CSS list-style-position

La propriété list-style-position contrôle si le marqueur d'un élément de liste (la puce ou le numéro) se trouve à l'intérieur ou à l'extérieur de la boîte de l'élément de liste. C'est un détail subtil mais visible : il détermine si le texte qui se répartit sur plusieurs lignes dans un long élément de liste s'aligne sous le marqueur ou sous la première ligne de texte.

Cette page explique les deux valeurs, la façon dont le choix affecte l'indentation et le retour à la ligne du texte, la relation de cette propriété avec le raccourci list-style, et quand utiliser chaque valeur.

Comment elle s'applique

list-style-position fonctionne sur tout élément dont la valeur de display est list-item. Par défaut, cela concerne les éléments <li>. Comme la propriété est héritée, on la définit généralement une seule fois sur la liste parente — <ul> ou <ol> — et chaque élément l'applique automatiquement.

Valeur initiale	outside
S'applique à	Les éléments de liste.
Héritée	Oui.
Animable	Non.
Version	CSS1
Syntaxe DOM	object.style.listStylePosition = "inside";

Syntaxe

list-style-position: inside | outside | initial | inherit;

Exemples

Exemple avec la valeur "inside"

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .inside {
        list-style-position: inside;
      }
      li {
        border: 1px solid #666;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>List-style-position property example</h2>
    <p>Here the list-style is positioned "inside".</p>
    <ul class="inside">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </body>
</html>

Essayez vous-même »

Résultat

![Propriété CSS list-style-position](https://api.w3docs.com/uploads/media/default/0001/03/f9df27bcea2db32f3bb0f4290142c7eea8e2ff47.png "Exemple CSS list-style-position inside" =420x)

Avec inside, le marqueur fait partie du contenu de l'élément. Il se trouve à l'intérieur de la boîte, de sorte que la bordure de chaque <li> englobe le marqueur, et tout texte qui passe à la ligne suivante s'aligne sous le marqueur plutôt que sous la première ligne de texte.

Exemple avec la valeur "outside"

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .outside {
        list-style-position: outside;
      }
      li {
        border: 1px solid #666;
        padding: 5px;
        margin-bottom: 15px;
      }
    </style>
  </head>
  <body>
    <h2>List-style-position property example</h2>
    <p>Here the list-style is positioned "outside".</p>
    <ul class="outside">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </body>
</html>

Essayez vous-même »

Avec outside (la valeur par défaut), le marqueur est repoussé dans la zone à gauche de la boîte. La bordure n'entoure alors que le texte, et les lignes qui passent à la ligne suivante s'alignent avec la première ligne de texte plutôt qu'avec le marqueur — l'aspect habituel de la plupart des listes sur le web.

Choisir une valeur

outside est le choix conventionnel. Le texte qui se répartit sur plusieurs lignes reste bien aligné, ce qui facilite la lecture des éléments longs. Comme le marqueur est suspendu à l'extérieur de la boîte, laissez-lui de la place avec le padding-left de la liste (les navigateurs ajoutent un rembourrage gauche par défaut pour cette raison).
inside est pratique lorsque vous ne pouvez pas vous permettre l'espace supplémentaire à gauche — par exemple, une liste dans une boîte étroite, une carte, ou une mise en page où chaque <li> a son propre arrière-plan ou sa propre bordure visible qui doit aussi englober le marqueur.

Une erreur courante consiste à supprimer le rembourrage gauche de la liste, puis à se demander pourquoi les marqueurs outside sont coupés. Si vous définissez padding-left: 0, le marqueur peut être repoussé hors de la zone visible ; passez à inside, ou rétablissez un rembourrage suffisant (voir padding).

Relation avec le raccourci list-style

list-style-position est l'un des trois composants du raccourci list-style, aux côtés de list-style-type et list-style-image. Ces deux déclarations sont équivalentes :

/* Longhand */
ul {
  list-style-type: square;
  list-style-position: inside;
}

/* Shorthand — type then position */
ul {
  list-style: square inside;
}

Valeurs

Valeur	Description	Essayer
outside	Place la boîte du marqueur à l'extérieur de la boîte de bloc principale. C'est la valeur par défaut de cette propriété.	Essayer »
inside	Définit la boîte du marqueur comme premier élément inline dans la boîte de bloc principale.	Essayer »
initial	Applique la valeur par défaut de la propriété.	Essayer »
inherit	Hérite la valeur de la propriété depuis son élément parent.

Pratique

Que spécifie la propriété 'list-style-position' en CSS ?

La position du marqueur de liste.Le style du marqueur de liste.La couleur du marqueur de liste.Si le marqueur de liste doit apparaître à l'intérieur ou à l'extérieur du flux de contenu.