text-box-trim
A highly anticipated property that allows you to 'trim' the leading (built-in vertical space) from the top and bottom of a text block. This solves the long-standing problem of text not being perfectly centered vertically in buttons or containers.
Quick example
.button {
/* Removes the extra whitespace above and below the text for perfect vertical centering */
text-box-trim: both;
text-box-edge: cap alphabetic;
}Quick facts
Initial value
noneInherited
No
Applies to
block containers and inline boxes
Animation type
discrete
Values
nonetrim-starttrim-endtrim-both text-box-trim Browser Support
Limited availability 80% global usage
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Not ready for production without a fallback.
133+
18.2+
133+