Hauteur De Ligne Javascript

| | | | | | | | | | | | | | | | | | | | | | | | | |

La propriété CSS line-height détermine la hauteur de ligne de divers éléments HTML. Il est couramment utilisé pour définir la distance entre les lignes de texte. Hauteur de ligne peut être définie à l’ aide des mots - clés, des pourcentages ou des valeurs numériques.

La propriété line-height CSS permet aux développeurs pour définir l’espace entre les deux éléments en ligne sur une page Web. Les développeurs utilisent souvent la propriété CSS line-height pour augmenter ou diminuer la distance entre les lignes de texte sur une page Web.

Ce didacticiel explique comment utiliser la propriété CSS line-height. Nous ferons référence à un exemple pour vous aider à démarrer. √Ä la fin de la lecture de ce didacticiel, vous maaîtriserez parfaitement l’utilisation de la propriété line-height dans votre code.

Line-height CSS

La propriété line-height CSS définit le hauteur d’une boaîte de rangée. Les zones de lignes sont les lignes qui composent une zone en CSS . Cette méthode est souvent utilisée pour définir la distance entre les lignes de texte.

Le réglage de la hauteur des lignes vous permet d’ajuster indirectement l’espacement entre les lignes de texte (ou d’autres éléments) sur une page Web. C’est très similaire au formatage de texte dans Microsoft Word avec un double interligne ou un espacement de 1,15.

La syntaxe de la propriété CSS line-height est la suivante:

" lineHeight " fait référence à une valeur de longueur qui définit la hauteur d’un élément. < /p>

Trois types de valeurs que vous pouvez utiliser avec la propriété line-height sont la longueur, le nombre et le pourcentage:

Valeur Description Exemples de valeurs Résultat de Exemples de valeurs
Longueur Définit la hauteur de la ligne en utilisant une unité de mesure spécifique (comme em, px et cm). 10 px , 15 px, 20 px Si vous spécifiez 10px, la hauteur de ligne sera de 10px.
Numéro Définit la hauteur de la ligne pour qu’elle soit égale à un multiple de la taille de la police. 1, 1,8, 2 Si la taille de la police est de 10 px, la hauteur de la ligne sera 10 px, 18 px et 20 px respectivement. < / tr>
pourcentage Définit la hauteur de la ligne en pourcentage de la taille de la police de l’élément. 30%, 50%, 110% < /td> Si la taille de la police est de 10 px, la hauteur de ligne sera respectivement de 3 px, 5 px et 11 px.

Alternativement, vous pouvez spécifier le mot-clé "normal". Ce mot-clé spécifie l’utilisation du navigateur par défaut. Cette valeur est généralement d’environ 1,2, selon le navigateur utilisé par l’utilisateur.

Si vous appliquez la propriété line-height à une boaîte, tout le texte dans cette boaîte utilisera la hauteur de la boaîte. line vous avez spécifié.

Une note sur l’accessibilité

La modification de l’interligne est une utilisation courante de la propriété line-height. C’est parce que vous voulez toujours vous assurer qu’il y a suffisamment d’espace entre les lignes. S’il n’y a pas assez d’espace entre les lignes, le texte peut être difficile à lire.

Un texte difficile à lire a un effet particulièrement grave sur les personnes malvoyantes. L’accessibilité doit toujours être prise en compte lors de la création d’un site Web.

Lorsque vous utilisez un nombre pour définir la hauteur de ligne d’un élément en CSS, vous ne devez pas utiliser de valeurs inférieures à 1,5. En effet, des valeurs inférieures à 1,5 pour la hauteur de ligne peuvent rendre plus difficile l’utilisation de votre site par les lecteurs malvoyants.

Exemple CSS pour la hauteur de ligne

Supposons que vous concevez un Page "√Ä propos de nous" pour le site Web d’un club de cuisine local. La page contient un en-tête suivi d’un paragraphe de texte décrivant une description du club.

Nous voulons que notre texte soit correctement espacé. Nous décidons donc de définir la hauteur de ligne du paragraphe de texte sur la page Web à 1,6 rem. Nous pouvons le faire en utilisant ce code:

Notre code renvoie: Click ’Image dans l’éditeur de code ci-dessus pour voir la sortie de notre code HTML/CSS.

Dans notre fichier HTML, nous ont défini un en- tête " √Ä propos de nous " à l’ aide d’une étiquette

. Nous avons donc rédigé une description de Fantastic Chefs et l’avons incluse dans la balise HTML

.

Dans notre fichier CSS, nous avons défini une règle. Notre règle utilise deux propriétés CSS. Nous définissons la hauteur de ligne à 1,6rem et la taille de la police à 16px pour toutes les balises HTML

.

L’unité de mesure "rem" que nous avons utilisée avec la propriété line-height définit une hauteur de ligne relative à la taille de la police de l’élément racine. "rem" signifie "élément racine". Ainsi, parce que la taille de notre police était 16px, la hauteur de la ligne de ce paragraphe de texte était 25.6px (16px * 1.6).

Le texte du paragraphe ci - dessus est bien espacées et ne se chevauchent pas.

Nous pourrions également appliquer la hauteur de ligne à notre élément sur les valeurs que nous avons spécifiées. Cela signifierait que nos titres et notre balise

seraient affectés.

Conclusion

Le CSS line-hei La propriété ght définit la hauteur d’une boaîte de ligne. Généralement, cette propriété est utilisée pour définir l’espacement entre les lignes de texte dans un paragraphe ou un titre. La hauteur de la ligne peut être réglée à l’ aide du mot - clé normal, un pourcentage, une longueur, ou une valeur numérique.

Ce tutoriel a discuté les bases de la propriété hauteur ligne CSS et comment vous pouvez l’ utiliser dans le code . Vous avez maintenant les connaissances nécessaires pour commencer à utiliser la propriété CSS line-height comme un expert !

Vous souhaitez devenir développeur Web ? Consultez notre Guide d’apprentissage CSS pour obtenir des conseils d’experts et des conseils sur les meilleures ressources et cours d’apprentissage.