CSS Text Box Trim

CSS Text Box Trim is a CSS property that allows you to remove the leading whitespace from a block of text. This is useful for removing the space between the top of the text and the top of the container.

🚨 text-box-trim is the new name for leading-trim: w3c/csswg-drafts#8067 (comment)

Usage

.text-box-trim {
  text-box-trim: both;
  text-box-edge: cap alphabetic;
}

Playground

As of early 2025, text-box-trim is available by default in Chrome 133+, Edge 133+, and Safari 18.2+. You can also try it out in the playground

Playground Examples

text-box-edges

button

subgrid gap

Text Edge Values

Text edge values are based of a fonts OpenType meta data. It will also be possible to define these values with css: https://www.w3.org/TR/css-fonts-5/#font-metrics-override-desc

Visualisation of the different text-box-edge values:

text-box-edge: normal

text-box-edge: text

text-box-edge: ex

text-box-edge: ex alphabetic

text-box-edge: cap

text-box-edge: cap alphabetic

text-box-edge: ideographic

text-box-edge: ideographic ideographic-ink

text-box-edge: ideographic-ink

text-box-edge: ideographic-ink ideographic

Browser Support

⚠️ Note: Browser support has significantly improved since mid-2024.

• Can I use
• WebPlatformTests

Browser	Status
Chrome	✅ Available in v133+ (February 2025) - Previously behind flag in v128+ (August 2024)
Firefox	❌ Not yet implemented - see Issue 1816038
Safari	✅ Available in v18.2+ (December 2024) - Previously behind flag in v16.4+ (March 2023)
Opera	❌ Not yet implemented
Edge	✅ Available in v133+ (February 2025) - Previously behind flag in v128+ (August 2024)

Major Update: As of early 2025, text-box-trim and text-box-edge are now available by default in Chrome 133+, Edge 133+, and Safari 18.2+ without requiring feature flags!

Help Shape the Future of This Feature

The Web Platform Developer Signals initiative is collecting feedback from web developers about text-box-trim. Please upvote 👍 the issue and share your usage examples in text-box tracking issue

Talks

Initial

Initial idea from October 2018

Proposal

w3c/csswg-drafts#3240 https://www.w3.org/TR/css-inline-3/#propdef-text-box-trim

Usecases

Here are some cases where this property can be useful:

Centering text in buttons

button {
    padding: 6px
}

With text-box-trim:

button {
  text-box-trim: both;
  text-box-edge: cap alphabetic;
  padding: 10px
}

Spacing Systems

Most design systems have a spacing system that is based on multiples of a base unit. For example, a spacing system might have a base unit of 4px, and then multiples of that unit, such as 8px, 12px, 16px, etc. This is a great way to ensure that spacing is consistent across the design system.

However the added line-height destroys the spacing system:

Icons

Aligning icons with text is a common problem. With leading trim, you can align the icon with the text:

Images

In articles images are often placed next to images. The leading trim property allows you to remove the whitespace above the text to align the text with the image.

Art

Especially in logo design and art leading trim can be used to create aligned different text elements:

Open Issues

⚠️ Note: Check these issues for current status and updates.

• Firefox Issue 1816038 - [css-inline-3] Implement text-box-trim (formerly leading-trim)
• Chromium Issue 1411581 - Implement text-box-trim property
• Webkit Issue 252161 - [text-box-trim] nested elements shift text upwards

Related Links

• w3.org text-box-trim
• w3.org text-box-edge
• Leading-Trim: The Future of Digital Typesetting
• Typography design 101: a guide to rules and terms
• CapSize
• Deep dive CSS: font metrics, line-height and vertical-align
• Online fonteditor

Credits

• Elika J. Etemad (fantasai) (Spec, Images, Talk)
• Ethan Wang (Images, Talk)
• Andrea Stan (Images)
• Vincent De Oliveira (Button Image)
• Kanji Database Project (Image)
• Anton Ball (SubGrid Example)