Cours CSS / Espacer et aligner les paragraphes et les listes

Le CSS contrôle l'alignement des paragraphes, l'indentation, l'espacement des lignes et les marges sans changer le sens du texte. Pour les listes, le style et la position des marqueurs affectent l'apparence des éléments répartis sur plusieurs lignes, tandis que le HTML fournit toujours la structure et l'ordre de la liste.

Séparer l'espacement des lignes de celui des paragraphes

.article p {
  line-height: 1.65;
  margin-block: 0 1.2em;
}

Si vous augmentez la hauteur de ligne, l'agencement des lignes dans le même paragraphe devient plus large. L'augmentation de margin-block augmente l'espace extérieur entre le bloc de paragraphe et le contenu suivant. Utiliser les deux de manière interchangeable peut sembler correct dans de courts paragraphes, mais peut entraîner un espacement des lignes excessif dans de longs paragraphes.

margin-block: 0 1.2em définit la marge de début de bloc à zéro et la marge de fin de bloc à 1,2 em. Dans cet exemple d'écriture horizontale, ce sont le haut et le bas. L'écriture verticale change les directions physiques. Ici, em utilise la taille de police propre au paragraphe. Voir MDN : margin block.

Les navigateurs fournissent des marges par défaut pour les paragraphes et les listes. Remplacez-les délibérément pour distinguer ces valeurs par défaut de vos propres espacements. Les marges verticales adjacentes des blocs peuvent fusionner plutôt que de s'additionner. Cet exemple définit la marge de début du paragraphe à zéro et contrôle l'écart avec sa marge de fin. Pour plus de détails, voir Le Modèle de Boîte CSS : Contenu, Rembourrage, Bordure et Marge.

Comparez l'alignement du texte et l'indentation de la première ligne

.article p { text-align: start; }

.article .intro { text-indent: 1.5em; }

text-align détermine l'alignement du texte à l'intérieur d'une ligne. start est le début du flux de texte et se trouve à gauche dans un document classique de gauche à droite. Ce n'est pas une propriété qui déplace l'ensemble du bloc de paragraphe au centre de l'écran. Les descriptions longues centrées ont des positions de départ différentes pour chaque ligne, donc choisissez d'abord un alignement facile à lire pour le corps du texte.

text-indent: 1.5em indente le début de la première ligne, et non chaque ligne. Le premier paragraphe de l’exemple complet porte class="intro" pour rendre cet effet observable. Si vous voulez indenter un paragraphe entier, vous devrez examiner d'autres paramètres tels que le padding. Changez l'alignement, l'indentation et les marges, et comparez quelles parties se déplacent.

Positionner les marqueurs et le texte sur plusieurs lignes

Utilisez ol pour les processus ordonnés et ul pour les éléments où l'ordre n'est pas important. Changer la forme du numéro en point dans le CSS ne modifie pas la structure HTML originale. Choisissez d'abord la signification du contenu, puis ajustez la méthode d'affichage.

Avec outside, les marqueurs de liste se trouvent à l'extérieur de la boîte de contenu, donc réservez de l'espace au début en ligne de la liste. Dans cet exemple de gauche à droite, padding-inline-start: 1.6em fournit un remplissage à gauche. Avec inside, le marqueur prend de la place sur la première ligne ; les lignes suivantes peuvent s'étendre sous sa position. Comparez des éléments réalistes à retour à la ligne.

La suppression des marqueurs de liste nécessite également une vérification d'accessibilité. Safari peut omettre une liste avec list-style: none de l'arborescence d'accessibilité lorsqu'elle est en dehors de nav. Envisagez role="list" lorsque la conservation de la sémantique de la liste est nécessaire. L'exemple complet de cette leçon conserve ses marqueurs. Voir MDN : style de liste.

Séparer l'espacement des éléments de l'espacement des lignes

.article li + li { margin-block-start: 0.45em; }

li + li sélectionne le li qui vient immédiatement après un autre li. Cette règle n’ajoute aucune marge avant le premier élément ; elle en ajoute avant le deuxième et chacun des suivants. Les parties d'un élément qui s'étendent sur plusieurs lignes sont contrôlées par la hauteur de ligne héritée de la liste. Si vous augmentez uniquement l'espacement entre les éléments parce que le contenu est dense, les phrases à l'intérieur de l'élément peuvent encore sembler étroites.

Exécutez l'exemple complet de paragraphe et de liste

Enregistrez le code ci-dessous en UTF-8 dans paragraphs.html et ouvrez-le. Les deux listes contiennent les mêmes phrases afin d’isoler l’effet de la position des marqueurs. L'indentation de la première ligne et les listes ordonnées sont également vérifiées dans le même fichier.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing paragraphs and lists</title>
  <style>
    body { margin: 24px; font-family: sans-serif; color: #333; }
    .article { max-width: 65ch; }
    .article p { line-height: 1.65; margin-block: 0 1.2em; text-align: start; }
    .article .intro { text-indent: 1.5em; }
    .article ul, .article ol { padding-inline-start: 1.6em; margin-block: 0 1.2em; line-height: 1.65; }
    .article li + li { margin-block-start: 0.45em; }
    .outside { list-style-position: outside; }
    .inside { list-style-position: inside; }
    ol { list-style-type: decimal; }
  </style>
</head>
<body>
  <main class="article">
    <h1>Small Garden visitor guide</h1>
    <p class="intro">If this is your first visit, check the signs first. This paragraph has a first-line indent. When the text wraps, the remaining lines return to the normal paragraph edge.</p>
    <p>Use line-height for spacing between lines and margin for spacing between paragraphs. Narrow the window and check readability as the text wraps onto more lines.</p>
    <h2>outside list</h2>
    <ul class="outside">
      <li>Check the soil before watering. Wipe up water spilled outside the pot so that other visitors do not slip.</li>
      <li>Read the labels and signs, then follow the path. Compare how the second line of a wrapped list item aligns with its first line.</li>
    </ul>
    <h2>inside list</h2>
    <ul class="inside">
      <li>Check the soil before watering. Wipe up water spilled outside the pot so that other visitors do not slip.</li>
      <li>Read the labels and signs, then follow the path. Compare how the second line of a wrapped list item aligns with its first line.</li>
    </ul>
    <h2>Preparation in order</h2>
    <ol><li>Read the notice.</li><li>Prepare a watering can.</li><li>Put tools back after use.</li></ol>
  </main>
</body>
</html>

Testez chaque modification d'espacement

1. Réduisez la largeur de la fenêtre afin que les éléments de la liste s'étendent sur plus d'une ligne. Avec outside, comparez l’alignement du texte des deux premières lignes. Avec inside, vérifiez si la deuxième ligne commence sous la position du marqueur.
2. Remplacez text-indent dans .intro par 0. Vérifiez si la position de départ de seulement la première ligne du premier paragraphe change et revenez à 1.5em.
3. Changez la valeur de margin-block-end du paragraphe à 0. Assurez-vous que l'espace entre les paragraphes est réduit tout en maintenant l'interligne à l'intérieur du paragraphe. Ensuite, changez uniquement line-height à 1.2 pour distinguer la différence, puis revenez à la valeur originale.
4. Comparez en changeant 0.45em de li + li à 0 et 1em. Assurez-vous que l'interligne à l'intérieur de l'élément et l'espace avant le premier élément ne diffèrent pas.

Si un symbole est tronqué, vérifiez le remplissage de la liste et le débordement des éléments extérieurs. Si seuls certains paragraphes ont des espacements différents, vérifiez le sélecteur et les styles par défaut du navigateur. 65ch dans l'ensemble de l'exemple est la longueur maximale basée sur la largeur du chiffre 0 et n'est pas une valeur fixe pour le nombre de caractères.