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 une longueur */
line-height-step: 18pt;

Valeur introuvable dans la base de données

Syntaxe

La propriété line-height-step peut être définie avec une valeur de type <length>.

Valeurs

<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

La syntaxe n'a pas été trouvée !

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 avec une capture d'écran :

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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simple
Expérimentale
Chrome Support complet 60
Désactivée
Support complet 60
Désactivée
Désactivée From version 60: this feature is behind the --enable-blink-features=CSSSnapSize runtime flag.
Edge ? Firefox ? IE ? Opera Support complet 47
Désactivée
Support complet 47
Désactivée
Désactivée From version 47: this feature is behind the --enable-blink-features=CSSSnapSize runtime flag.
Safari ? WebView Android Support complet 60
Désactivée
Support complet 60
Désactivée
Désactivée From version 60: this feature is behind the --enable-blink-features=CSSSnapSize runtime flag.
Chrome Android Support complet 60
Désactivée
Support complet 60
Désactivée
Désactivée From version 60: this feature is behind the --enable-blink-features=CSSSnapSize runtime flag.
Edge Mobile ? Firefox Android ? Opera Android Support complet 47
Désactivée
Support complet 47
Désactivée
Désactivée From version 47: this feature is behind the --enable-blink-features=CSSSnapSize runtime flag.
Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

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