CSS text-box-trim

Take back space from above and below your text content; achieve optical balance.

Adam Argyle

Published: Jan 14, 2025

From Chrome 133, text-box lets developers and designers tailor the space above and below text.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: 18.2.

Longhand:

text-box-trim: trim-start | trim-end | trim-both | none;
text-box-edge: cap | ex | text | leading;
line-fit-edge: alphabetic | text;

Shorthand:

text-box: trim-both cap alphabetic;

This property lets you control the space above and below text, for example <h1>, <button> and <p>. Every font produces a different amount of this block directional space which contributes to the element's size. This chaotic space contribution is not easily measured, and has been impossible to control until now.

The font knows, now CSS knows!

https://codepen.io/web-dot-dev/pen/xbKjRxL

The space above and below a font is due to how the web lays out text, called "half-leading". This is expertly covered in a post by Matthias Ott called The Thing With Leading In CSS. Essentially, when typesetting was done by hand, pieces of metal lead were used to separate lines of text. The web, inspired by leading, divides that piece of lead in half and distributes a piece above and a piece below the content.

A headline is shown with a hotpink bar above and below the text to show half-leading.
Source

This history is meaningful because, text-box gives us names for each half: over and under. Plus, the ability to trim it off.

There is prior art to text-box also, you may recall the exciting post from Ethan Wang called Leading-Trim: The Future Of Digital Typesetting, where leading-trim (the name text-box previously had) was first introduced.

A headline is shown with excess space above and below appear to be cut with scissors and removed.

Your entry point into text trimming might be from Figma and its "vertical trim" controls for designers. This X post demonstrates where this vertical trim option is and how it's helpful for buttons.

Source

Regardless of how you got here, this small sounding typography control can make a big difference.

Feature and syntax overview

Here, in my opinion, are the two most common one-liners you'll need when working with text-box:

h1 {
  /* trim both sides to the capital letters */
  text-box: trim-both cap alphabetic;

  /* trim both sides to the lowercase letter x */
  text-box: trim-both ex alphabetic;
}

Trimming both to cap alphabetic will be the most common use of this feature. The following demos use this many times. However, the previous example also shows ex alphabetic because it is useful for optical balance in its own unique ways.

Explorer playground

The following demo lets you explore the syntax and see results using dropdown menus. You can change fonts, change over and under trim values, and follow along with the color coded visuals and labels.

A screenshot of the syntax explorer demo. Shows the font and a dropdown to choose a different font. A syntax preview with text-box: trim-both cap alphabetic syntax highlighted and shown. Finall, there's 3 more dropdowns to choose trim values.

Things to try:

  1. Visually inspecting how text-box-trim works across single line and multi-line text variants.
  2. Hovering over a variant, seeing the trim values used to achieve that effect.
  3. Changing the font.
  4. Trimming only one side of a text box.
  5. Review the syntax as you play.
https://codepen.io/web-dot-dev/pen/RNbyooE

What can I build with it or what problems does it solve?

There are some much simpler centering and alignment solutions that emerge from this trim capability. You can even get closer to proper leading, where something like gap can be used between contents.

A comparison is shown between 2 groups of content. The first group has half-leading, the second has trimmed leading. The result is the second group is tighter together.
https://codepen.io/web-dot-dev/pen/RNbyoKE

Easier centering

For smaller, more inline and content intrinsic components, padding: 10px is a reasonable style to specify for an element for equal spacing on all sides. However, the result can confuse people, as it often has extra space on the top and bottom.

To work around this, developers often explicitly putting less padding on the top and bottom (block) to offset the effects of half leading.

button {
  padding-block: 5px;
  padding-inline: 10px;
}

At this point we're left to try value combinations until things are optically centered. This might look good on one screen and operating system, but not on another.

text-box allows us to trim the half leading space from the text, making equal padding values like 10px useful:

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}
Two examples are shown. The first shows an element with padding: 10px and half-leading. The second shows the same element with text-box: trim-both cap alphabetic. The result is the second button is optically centered.
https://codepen.io/web-dot-dev/pen/NPKMbgq

Here are a few <button> elements that show how trimming the space with text-box makes padding: 10px look equal on all sides in a practical interactive element. Notice how the alternative font can produce some wildly different half leading space.

Three groups of buttons are shown. The first group shows a regular sans serif font. The second group shows a fancy or fun font. The third group shows the same effect but with a hand writing font. The point is to show each font has different half leading space, but the trim values are the same and can normalize the space.
https://codepen.io/web-dot-dev/pen/mybLOMg

Here are <span> elements, often used to show categories or badges. Another moment where equal sided padding should be the best solution, but until text-box we've had to work around it.

Tags are shown compared side by side. The first group has half-leading, the second has trimmed leading. The result is the second group is tighter together and optically centered.
https://codepen.io/web-dot-dev/pen/mybLOMg

Easier Alignment

The extra, uncontrollable, half leading space above (over) and below (under) a text box also makes alignment difficult. The following examples show when half leading can make alignment difficult and how trimming the block sides of a text box can create better alignments.

Here an image is placed next to text. The image will grow to the height that the text needs, but without text-box, the image is always a little bit taller. With text-box, the image can perfectly align with the text content.

https://codepen.io/web-dot-dev/pen/yyBjVpg

Notice the whitespace is above the first formatted line of text and below the last formatted line of text in scenarios with line wrapping.

In the following example, notice how the feature logically adapts to a change in writing-mode. Try changing the text, watch how the layout continues to stay aligned.

https://codepen.io/web-dot-dev/pen/dPbeOJQ

Continue study

Want to know more? The following list of links offer various amounts of additional information and use cases.