CSS text-box Property Now Supported Across All Major Browsers
A long-standing web typography issue — where fonts include invisible spacing that causes text boxes to appear taller than their actual content — can now be resolved using the CSS text-box property. The property combines text-box-trim and text-box-edge to let developers cut excess space above capital letters and below the baseline, making padding values truly consistent across fonts. This fix is particularly useful for buttons, badges, and inline elements where the invisible leading space is proportionally most noticeable. Chrome and Edge have supported the feature since version 133, Safari since 18.2, and Firefox will enable it by default from version 154, releasing on August 18, 2026. Developers are advised to re-apply intended padding after trimming, as the property removes all leading — including space that may have contributed to minimum tap-target sizes.
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