Définir l'espacement des lignes dans CSS

Nous allons introduire quelques méthodes pour définir l’interligne en CSS.

Utilisez la propriété line-height pour définir l’espacement des lignes dans CSS

Nous pouvons utiliser la propriété CSS line-height pour définir l’espacement entre les lignes d’un paragraphe. La propriété définit la hauteur d’une ligne.

Lors de la définition de la hauteur de ligne, l’espace entre les lignes augmentera ou diminuera en conséquence. On peut appliquer la propriété line-height à des éléments de texte, notamment un paragraphe.

La propriété prend différentes valeurs telles que normal, number, length, %, initial, et inherit. Nous allons démontrer l’utilisation de ces différentes options dans l’article.

La valeur normal est la valeur par défaut de la propriété line-height. Il définira la hauteur de ligne normale.

Nous pouvons définir la valeur comme un name sans unité. Le nombre donné sera multiplié par la taille de police actuelle, et il est utilisé pour définir la line-height. Le nombre 1.6 est la valeur recommandée pour la propriété line-height.

Nous pouvons également utiliser la valeur length, en donnant les unités comme pt, px, cm, etc. La valeur en % spécifie le pourcentage de la taille de police actuelle pour définir la line-height.

Nous pouvons définir la valeur par défaut de la propriété line-height en utilisant la valeur initial. La valeur inherit utilisera la même valeur de la propriété de son élément parent.

Par exemple, créez quatre div en HTML avec les classes normal, number, percentage et length. À l’intérieur du div, écrivez un texte factice.

Ensuite, en CSS, sélectionnez l’élément div et définissez la propriété width sur 400px et la propriété word-wrap sur break-word. Ensuite, sélectionnez l’individu div avec le nom de la classe et définissez les valeurs de la propriété line-height comme normal, 2, 80% et 10px selon les noms de classe indiqués dans l’exemple ci-dessous.

Nous définissons la largeur div et la propriété word-wrap sur break-word pour forcer le texte dans la ligne suivante. De cette façon, nous pouvons utiliser la propriété line-height pour définir l’interligne en CSS.

Exemple de code :

<h2>Normal Value</h2>
<div class="normal">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio. </div>

<h2>Number Value </h2>
<div class="number">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio.</div>

<h2>Percentage Value</h2>
<div class="percentage">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio.</div>

<h2>Length Value</h2>
<div class="length">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio.</div>

div{
 width:400px;
 word-wrap: break-word;
}
div.normal {
 line-height: normal;
}

div.number {
 line-height: 2;
}

div.percentage {
 line-height: 80%;
}

div.length {
 line-height: 10px;
}