Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →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
text-box-trim removes selected space at the top or bottom of a text box, making it easier to align headings and controls with surrounding elements. It is not a universal fix for vertical alignment: the result depends on the chosen font metrics, layout, and browser support. The claim that “nobody” uses it is not established by available adoption data.
What does CSS text-box-trim do?
A line of text occupies space shaped by font metrics and line spacing, not just by the visible letterforms. That can leave extra room above capitals or below a baseline. text-box-trim tells the browser whether to trim the start edge, end edge, both, or neither. MDN’s reference for text-box-trim documents the property and its values.
The companion property, text-box-edge, chooses the text metrics that define the trimming boundary. The text-box shorthand sets both properties. Together, they let you tune the text box around its content rather than compensating with arbitrary margins or padding.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
How do you use it?
A useful starting point for a Latin-script heading or control is:
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
.heading {
text-box: trim-both cap alphabetic;
}This trims both edges, using the capital-letter top for the over edge and the alphabetic baseline for the under edge. The shorthand’s normal value means no trimming with automatic edge selection. If you use the longhands, text-box-trim defaults to none and text-box-edge defaults to auto. See MDN’s text-box reference for the shorthand and edge choices.
Choose the edges to trim
trim-bothtrims the start and end edges.trim-starttrims only the start edge.trim-endtrims only the end edge.noneleaves both edges untrimmed.
Choose the text metrics
cap alphabetic uses the capital-letter top and alphabetic baseline. ex alphabetic uses the x-height for the over edge and the alphabetic baseline for the under edge; because the x-height differs from the cap height, the visual result can differ. These are design choices, not universal typographic defaults. Try the alternatives with the actual font and content you plan to ship.
When can trimming improve alignment?
It can make the spacing around headings and button labels easier to control, especially when you want text to sit more predictably within a control or alongside another element. Chrome for Developers describes the feature as a way to tailor the space above and below text, and illustrates equal button padding after trimming half-leading: CSS text-box-trim.
Check the result with the real typeface, font size, glyphs, and surrounding layout. Trimming changes the text box; it does not guarantee that every line, script, or visual shape will appear centered to the eye.
What can prevent trimming from working as expected?
The CSS Inline Layout Module Level 3 draft specifies important layout limits:
- For a block container,
trim-startapplies to the first formatted line andtrim-endto the last. - Trimming does not take effect at an edge where intervening non-zero padding or borders are present.
- The property does not apply to or propagate through flex, grid, or table formatting contexts.
- Print user agents may ignore trimming at an edge if applying it would clip content.
If the visible result does not change, check the element’s formatting context and whether padding or a border sits between the text and the edge being trimmed. Also inspect the text with borders, as MDN recommends, to see which box is changing.
Rank #4
Is text-box-trim supported in all browsers?
No. MDN marks text-box and text-box-trim Baseline 2026, newly available in the latest browser versions since August 2026, while noting that older devices and browsers may not support them. Chrome for Developers says the feature shipped in Chrome 133. These statements do not establish support for every browser version; check the current compatibility information for the browsers your site needs to support before relying on it.
For a site that must work in older browsers, treat trimming as an enhancement rather than a prerequisite for readable layout. Test the untrimmed fallback and the trimmed result in your target browsers.
Best Value
Is it true that nobody is using it yet?
There is no reliable adoption statistic in the sources cited here, so the claim cannot be confirmed. The feature is documented by MDN and has shipped in Chrome, but that alone does not show how widely developers use it across websites.
Quick Recap
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.
