For years, you've been fighting the good fight for consistent text spacing in your digital products. But the fact is, all modern browsers quietly fixed that problem while no one was looking.
There is a text-box-trim native CSS feature that removes the phantom gap above and below your text. It's amazing!
The ghost space nobody talks about
There is invisible cushioning in every line of text, which is embedded within the font metrics and exists above the cap height and beneath the baseline.
You've experienced it. That button where the text is a bit higher than you'd like. That title which seems to be misaligned with the icon next to it, and you can't seem to correct it.
For years, we tackled this issue by using line-height calculations. We also used negative margins, and resorted to using magic numbers taken from a designer's Figma file that we hoped would work.
The entire ritual was actually a solution to a problem that we were facing because the browser failed to do so.
What text-box-trim actually does
It removes the extra space from the text box. No hacks, no negative margins, no guesswork.
The Syntax Podcast has just covered it. Along with alpha() and progress(), that's how a lot of people are hearing about it at all. Tells you something.
Here is how it goes:
The text-box-trim property in CSS is used to set the trimming of the text box. The text-box-edge property is used to define a reference edge for the cap-height of the content.
The top is capped at the cap height and the bottom is based on the alphabetic baseline. All other ghost (and possibly grim) padding is shaved entirely off the character.
Your text is now perfectly in line with where the letters sit. Vertical centering just does its thing. Icons line up perfectly. Buttons stop looking slightly off.
So why is nobody using it?
It's all about the tooling being resistant to change and difficult to adapt.
We developed spacing systems based on this old issue. Including design tokens, utility classes, and spacing scales that assumed the invisible gap was always there.
Removing such a hack poses a risk. So teams keep shipping the line-height hacks they've shipped for a decade, because the hack is what the codebase already knows.
That really confuses me. 🙃
We often express a preference for native platform features. However, when a really good one is introduced and our current tools or frameworks don't support it right away, we tend to overlook its potential.
This keeps happening
text-box-trim isn't special in being ignored. It's special in being obviously useful and still ignored.
The industry repeats this cycle endlessly:
→ A native feature ships and solves a real pain
→ Everyone keeps using the old workaround out of muscle memory
→ Two years later a framework "adds support" and suddenly it's cool
It wasn't the star that changed, it was our attitude.
I must admit, I've been guilty of this as well. Reflexively resorting to the old negative-margin trick, instead of using the proper tool designed to handle such cases.
Just try it
You don't need a migration plan. Just choose one troublesome heading. One button label that has always seemed inappropriate.
Simply apply text-box-trim to it, and you'll see that ghost gap disappear. That tiny moment where you think "oh, that's all?" is extremely important.
The platform has improved in our absence. The minimum we can do is pay attention. ✨
What's a native CSS feature you slept on for way too long before it clicked?
Top comments (0)