line-height-step

Non standard
Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

La propriété line-height-step définit le pas de hauteur des boîtes de ligne. Quand le pas est positif, les hauteurs des boîtes de ligne sont arrondies au pas le plus proche. Les valeurs négatives sont invalides.

/* Valeurs avec un mot-clé */
line-height-step: none;

/* Valeurs avec une longueur */
line-height-step: 18pt;

Valeur initialenone
Applicabilitéles éléments conteneurs de blocs
Héritéeoui
Médiavisuel
Valeur calculéeune longueur absolue ; si le mot-clé none est spécifié, la valeur calculée sera 0
Type d'animationdiscrète
Ordre canoniqueselon la grammaire

Syntaxe

La propriété line-height-step peut être définie avec :

Valeurs

none
Aucune valeur n'est indiquée.
<length>
La longueur indiquée est utilisée pour calculer le « pas » pour la hauteur de la boîte de chaque ligne. Voir <length> pour plus d'informations sur ce type de valeur.

Formal syntax

none | <length>

Exemples

Dans l'exemple suivant, la hauteur de la boîte des lignes pour chaque paragraphe est arrondie à l'unité supérieure. La boîte de la ligne pour l'élément <h1> ne tient pas sur une unité et en occupe donc deux (mais est toujours centrée sur ces deux unités).

:root {
  font-size: 12pt;
  --my-grid: 18pt;
  line-height-step: var(--my-grid);
}
h1 {
  font-size: 20pt;
  margin-top: calc(2 * var(--my-grid));
}

Voici le résultat obtenu :

How the line-height-step property affects the appearance of text.

Spécifications

Spécification État Commentaires
CSS Rhythmic Sizing
La définition de 'line-height-step' dans cette spécification.
Version de travail Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Support simple 59 ? ? ? 47 ?
Fonctionnalité Webview Android Chrome pour Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple 59 59 ? ? ? 47 ?

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : kodliber, SphinxKnight
 Dernière mise à jour par : kodliber,