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

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

<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 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.

Valeur initiale0
Applicabilitéconteneurs de type bloc
Héritéeoui
Valeur calculéeune longueur (type length) absolue
Type d'animationdiscrète

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi