text-box (text-box-trim / text-box-edge)

Définition

Raccourci qui retire l'espace vertical parasite au-dessus et en dessous d'un texte, dû à la hauteur de ligne et aux métriques de police. text-box-trim choisit les bords à rogner, text-box-edge la référence (cap, ex, alphabetic, text). Baseline « Newly available » depuis août 2026.

Analogie

Recadrer une photo au ras du sujet au lieu de garder les marges blanches du tirage.

Exemple de code

h1 {
  text-box: trim-both cap alphabetic;
  /* le bloc colle aux majuscules et à la ligne de base */
}
.btn {
  text-box: trim-both ex alphabetic; /* centrage optique */
}

Cas d'usage

Boutons et titres alignés au pixel avec des icônés ou des bordures, quelle que soit la police chargée.

Anti-pattern

Termes liés

Sources

• developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-box