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.
It is documented as part of the CSS Inline specification.
Syntax
/* Usage Example */
.button {
/* Removes the extra whitespace above and below the text for perfect vertical centering */
text-box-trim: both;
text-box-edge: cap alphabetic;
}
/* Syntax */
text-box-trim: none;
text-box-trim: trim-start;
text-box-trim: trim-end;
text-box-trim: trim-both;
/* Global values */
text-box-trim: inherit;
text-box-trim: initial;
text-box-trim: revert;
text-box-trim: revert-layer;
text-box-trim: unset;text-box-trim Browser support
Limited availability
Since
2020 80% global usage
This feature is not Baseline because it does not work in some of the most widely-used browsers.
133+
18.2+
133+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more