Télécharger le PDF du cours
Ces propriétés sont les suivantes :
- La propriété
line-height; - La propriété
letter-spacing; - La propriété
word-spacing.
La propriété line-height
La propriété line-height va nous permettre de définir la hauteur de chaque ligne d’un texte et donc de fait l’espace entre les lignes.
Cette propriété va pouvoir accepter en valeur un nombre simple, une unité de longueur en px, em etc. ou un pourcentage.
Les valeurs nombre simple et pourcentage vont nous permettre de définir la hauteur totale de la ligne par rapport à la taille de la police. Par exemple, indique line-height : 2 ou line-height : 200% signifie que chaque ligne de notre élément aura une hauteur totale égale à deux fois la taille de la police, c’est-à-dire que l’interligne (espace entre deux lignes) sera égal à la hauteur de la police.
See the Pen Cours HTML CSS 4.5.1 by Pierre (@pierregiraud) on CodePen.
Ici, je donne un line-height égal à la taille de mon texte pour mon paragraphe p3. Chaque ligne va donc avoir exactement la même hauteur que le texte et il n’y aura pas d’espace entre les lignes.
Si on regarde attentivement, cependant, on observe qu’il reste tout de même un espace. Cela est dû à la définition même de la taille de la police. En effet, lorsqu’on définit une taille de police, on définit en fait la hauteur maximale que peut avoir un caractère.
Cependant, vous pouvez observer que tous les caractères ne font pas la même hauteur. Certains, comme le « e », le « a » ou le « r » occupent moins d’espace que le « l », le « p » ou que des caractères en majuscules par exemple. Notez que la hauteur réelle de chaque caractère va dépendre de la police utilisée.
C’est la raison pour laquelle il reste un espace visible entre les lignes lorsque les caractères ne sont pas des caractères occupant la hauteur maximale de police définie. Pour vous convaincre de cela, vous pouvez regarder le paragraphe p4 pour lequel nous avons défini la même taille de police et la même hauteur de ligne que pour p3 mais qui ne contient que des caractères occupant la taille maximale de police définie : il n’y a plus aucun espace visible entre les lignes dans ce cas.
La propriété letter-spacing
La propriété letter-spacing va nous permettre de définir l’espace entre les différents caractères de notre police.
Nous allons passer à cette propriété une valeur de type longueur en px ou en em par exemple. Les valeurs passées vont pouvoir être positives ou négatives.
La valeur passée à letter-spacing va venir s’ajouter à l’espace par défaut entre les caractères. Une valeur positive va donc augmenter l’espace entre les caractères tandis qu’une valeur négative va le réduire.
Attention toutefois : cette police est dépendante de la police utilisée et certaines valeurs passées vont possiblement ne pas être acceptées par la police et ainsi être modifiées automatiquement, notamment dans le cas de valeurs réduisant l’espace entre les caractères.
Notez également qu’en passant une valeur négative plus importante que la taille de votre police le texte s’affichera « à l’envers » c’est-à-dire que les lettres suivantes vont se retrouver avant les lettres précédentes.
See the Pen Cours HTML CSS 4.5.2 by Pierre (@pierregiraud) on CodePen.
La propriété word-spacing
La propriété CSS word-spacing va fonctionner de manière similaire à letter-spacing mais va cette fois-ci nous permettre de définir l’espace entre les différents mots d’un texte.
Une nouvelle fois, passer une valeur positive à word-spacing va augmenter l’espace défini par défaut par la police entre deux mots tandis que passer une valeur négative va le réduire.
De manière analogue à la propriété letter-spacing, il faudra faire très attention avec l’utilisation de valeurs négatives avec word-spacing car le texte peut très vite devenir illisible si plusieurs mots commencent à se chevaucher.
See the Pen Cours HTML CSS 4.5.3 by Pierre (@pierregiraud) on CodePen.
