CSS Text-Box Trim
Removes extra space above and below text for predictable spacing.
The CSS text-box-trim property with trim-both cap alphabetic removes the built-in spacing above and below text that browsers traditionally include. This creates more predictable and precise vertical spacing, especially important for pixel-perfect UI alignment.
Why It Matters
Designers have long struggled with the invisible space that browsers add above capital letters and below the baseline. This new CSS feature gives developers fine-grained control over text box boundaries, making it easier to:
- Align text vertically with adjacent elements
- Create consistent spacing in buttons and badges
- Build tighter typographic layouts without workarounds
How It Works
The text-box-trim: trim-both value removes extra space from both the top and bottom of the text box, while cap alphabetic defines the trimming edges based on the capital letter height (cap) and the alphabetic baseline.
.trimmed-text {
text-box-trim: trim-both cap alphabetic;
}This CSS feature represents a significant improvement in typographic control for web developers, eliminating the need for negative margins or other hacky solutions.
