line-height-step

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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.

css
/* 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.

Définition formelle

Valeur initiale0
Applicabilitéconteneurs de type bloc
Héritéeoui
Valeur calculéeune longueur (type <length>) absolue
Type d'animationby computed value type

Syntaxe formelle

line-height-step = 
<length [0,∞]>

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

css
: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

Specification
CSS Rhythmic Sizing
# line-height-step

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
line-height-step
Experimental

Legend

Tip: you can click/tap on a cell for more information.

No support
No support
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.

Voir aussi