CSS text-box-trim removes phantom text spacing gaps, but developers still ignore it
A native CSS property called text-box-trim, now supported across all modern browsers, automatically removes the invisible spacing embedded in font metrics above and below text characters. For years, developers worked around this issue using negative margins, line-height calculations, and hardcoded values sourced from design files. The property works alongside text-box-edge to align text precisely to the cap height and alphabetic baseline, eliminating the need for manual hacks. Despite its practical utility, the feature remains widely overlooked, partly because existing design systems and codebases were built around the old workarounds. The Syntax Podcast recently highlighted text-box-trim alongside other underused CSS features, bringing it to the attention of a broader developer audience.
This is an AI-generated summary. ShortSingh links to the original source for the complete article.

Discussion (0)
Log in to join the discussion and vote.
Log in