Comment ajuster l'interlignage en HTML

Les propriétaires de petites entreprises avec un arrière-plan imprimé seront familiers avec le terme de tête, qui fait référence à l'espacement entre les lignes de texte. Lors de la création d'une page HTML, l'équivalent de l'interlignage est la propriété CSS « ​​line-height », utilisée pour définir la quantité d'espace entre chaque ligne. La hauteur de ligne peut être définie sur une hauteur fixe, 12 pixels par exemple, ou en pourcentage de la taille de la police, par exemple 120%. La définition de la valeur sur « normal » réinitialise l'interligne à sa valeur par défaut.

1

Ouvrez une application de conception Web ou un éditeur de texte et créez une nouvelle page HTML ou ouvrez une page existante.

2

Ajoutez le code suivant au corps de la page Web:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum pulvinar pulvinar. Suspendisse eros nulla, sodales ut tincidunt sit amet, facilisis id dui. Donec pharetra euismod mattis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

3

Ajoutez la feuille de style CSS suivante à la section de la page :

Cette règle CSS s'applique au div avec l'id «exampleText», définissant la largeur à 400 pixels et la taille de la police à 14 pixels, affichant le paragraphe de texte sur un certain nombre de lignes. Enregistrez la page, puis ouvrez-la dans un navigateur Web pour afficher le résultat.

4

Ajoutez la nouvelle règle CSS suivante à la feuille de style dans le de la page:

hauteur de ligne: 200%; 

}

Cette règle modifiera l'interligne du paragraphe à 200 % de la taille de la police, dans ce cas 28 pixels. Si la taille de la police change, l'interligne changera automatiquement proportionnellement. Enregistrez la page et rechargez dans votre navigateur Web pour voir l'effet de la propriété d'interligne.

5

Modifiez le paramètre de hauteur de ligne sur 20 pixels, comme suit:

hauteur de ligne: 20px; 

}

Cela définit un espacement constant de 20 pixels entre les lignes de texte, indépendamment de la taille de la police du texte. Enregistrez la page et actualisez-la dans votre navigateur pour voir le nouvel espacement des lignes.


$config[zx-auto] not found$config[zx-overlay] not found