text-box-edge | frontendfacile.it

2 settembre 2026

text-box-trim: la fine del padding “sbilanciato” (e dei magic number)

Il padding verticale “uguale” che sembra diverso è un classico problema dovuto alle metriche dei font: ascender, accenti e discendenti aggiungono spazio invisibile sopra e sotto al testo. Oggi CSS offre una soluzione nativa: text-box-trim insieme a text-box-edge permettono di rifilare quel margine interno e far combaciare il box con cap height e baseline. Risultato: bottoni, chip e UI one-line finalmente centrati senza trucchi, e design/implementazione più allineati.

CSS text-box: finalmente testo senza “spazio fantasma” sopra e sotto

In CSS il testo porta con sé spazio extra sopra e sotto dovuto alle metriche del font: un dettaglio che complica allineamenti verticali, badge, pill e componenti “pixel-perfect”. La nuova proprietà text-box (shorthand) unisce text-box-trim e text-box-edge per rifilare il box del testo in modo controllato, scegliendo cosa tagliare (top/bottom) e a quali riferimenti tipografici (cap height, x-height, baseline).