v149 · CSS

Trim Basics

Toggle between untrimmed and trimmed headings to see exactly what text-box: trim-both cap alphabetic removes. The blue background makes the invisible space visible.

Feature detection: checking…

Before (this browser)

Typography

The blue background shows the element box. Without trimming, there is visible space above the "T" cap height and below the "y" baseline — both donated by line-height.

← extra space above cap & below baseline visible

After (simulated)

Typography

With text-box: trim-both cap alphabetic, the element box shrinks to fit cap height at the top and alphabetic baseline at the bottom — the blue snaps flush to the letters.

← trimmed: cap top + alphabetic baseline
/* Without trim — default */
h2 {
  font-size: 2rem;
  line-height: 1.3;
  background: blue;   /* visibly pads above cap and below baseline */
}

/* With trim — snap box to cap height and baseline */
h2 {
  font-size: 2rem;
  line-height: 1.3;
  text-box: trim-both cap alphabetic;
  /* shorthand for: */
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗