line-height-step
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
La propriété CSS 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.
Syntaxe
/* Valeurs avec une longueur */
line-height-step: 18pt;
/* Valeurs globales */
line-height-step: inherit;
line-height-step: initial;
line-height-step: revert;
line-height-step: revert-layer;
line-height-step: unset;
La propriété line-height-step peut être définie par l'une des valeurs suivantes :
- une
<length>.
Valeurs
Définition formelle
| Valeur initiale | 0 |
|---|---|
| Applicabilité | conteneurs de type bloc |
| Héritée | oui |
| Valeur calculée | une longueur (type <length>) absolue |
| Type d'animation | by computed value type |
Syntaxe formelle
line-height-step =
<length [0,∞]>
Exemples
Définir l'unité de pas pour la hauteur de la boîte de ligne
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 :
Spécifications
Actuellement, aucun navigateur ne prend en charge cette fonctionnalité.
Compatibilité des navigateurs
Actuellement, aucun navigateur ne prend en charge cette fonctionnalité.
Voir aussi
- La propriété
font - La propriété
font-size - La propriété
line-height - La psécification de dimensionnement rythmique CSS (angl.)