Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
To trim an English headline’s text box to the top of capital letters and the alphabetic baseline, try text-box: trim-both cap alphabetic;. This CSS shorthand targets spacing created by font metrics and line-height; it is not a general fix for every margin or layout problem. Check the result with your actual font and text before applying it broadly.
Why a headline can look like it has extra space
A text element’s line box is influenced by font metrics and line-height. Different typefaces can therefore produce text boxes of different heights at the same font size. The visible gap around a heading may come from that text box, rather than from an element margin alone.
Negative margins can nudge a heading into place, but they do not directly express which part of the text box should define its boundary. text-box-trim lets you trim the block-start edge, the block-end edge, or both, using a selected font metric. It addresses text-box spacing—not unrelated padding, margins, or layout constraints.
How to use text-box-trim on a headline
For an English headline intended to begin at the capital-letter tops and end at the alphabetic baseline, start with:
#1 Best Overall
h1 {
text-box: trim-both cap alphabetic;
}text-box is shorthand for text-box-trim and text-box-edge. The first value selects which edge to trim; the edge values select the font metrics that define the boundaries. The cap alphabetic combination is a starting point, not a universal setting.
Choose the edge and font metrics deliberately
Trim one edge or both
text-box-trim: noneis the default and trims neither edge.text-box-trim: trim-starttrims the block-start edge only.text-box-trim: trim-endtrims the block-end edge only.text-box-trim: trim-bothtrims both edges.
If the unwanted space is only above or below the heading, select just that edge instead of trimming both automatically.
Select a boundary metric
text-box-edge: cap alphabeticuses the top of capital letters for the start edge and the alphabetic baseline for the end edge.text-box-edge: ex alphabeticuses the top of the lowercase x-height for the start edge and the alphabetic baseline for the end edge.
Compare the intended optical boundary with the actual typeface and text. Also check what happens when a heading wraps: the result depends on the font metrics and the content, not just the CSS declaration.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsCheck the effect in the rest of the design
Trimming can remove space that was serving as intentional breathing room. Compare the result on real headings, buttons, and paragraphs, and inspect it in the surrounding layout. The Chrome for Developers explanation describes text-box controls as a way to manage spacing and alignment, rather than as a replacement for every spacing technique. Adam Argyle, author of that article, summarizes the idea: “The font knows, now CSS knows, too.”
Developers may also be trying to match text-box height between browsers. Trimming gives CSS a way to specify boundaries based on font metrics, but the metric choice alone does not guarantee identical results for every browser, font, or script. Check the actual combinations your design uses.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Browser support and writing-system caveats
As of 2026, MDN marks the property Baseline 2026 and says it has worked across the latest devices and browser versions since August 2026. Can I Use lists current Chrome, Edge, Safari, and Firefox releases as supporting it; earlier releases remain unsupported, and support in some other browsers is unknown or absent. Check the versions used by your audience before making trimming the only rule that controls spacing.
Rank #4
Can I Use reports 86.46% support using StatCounter usage-share data for August 2026. That is a dated estimate, not a guarantee for a particular audience or a timeless measure of compatibility.
There is also a standards caveat: the CSS Working Group editor’s draft dated August 11, 2026 notes that relevant font metrics are missing for many writing systems, citing Hebrew as an example. The draft is explicitly work in progress. Test the scripts and fonts your site uses instead of assuming an English headline setting will behave appropriately everywhere.
Quick Recap
A practical decision checklist
- Identify whether the apparent gap comes from the text box, rather than assuming it is a margin problem.
- Choose the intended start and end boundaries: for example, capital tops and the alphabetic baseline, or x-height and the alphabetic baseline.
- Trim only the edge or edges that need adjustment.
- Inspect real typefaces, heading text, wrapped lines, and neighboring elements.
- Check browser versions, writing systems, and fonts relevant to your audience before relying on the rule alone.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
