v133 · css

Typographic Rhythm

CSS text-box: trim-both removes the invisible half-leading above cap-height and below baseline from headings and body text. The result is spacing that comes from actual layout gaps — not from the font's built-in padding — giving designers complete control of vertical rhythm.

Feature detection: checking…

before vs after

Without text-box trim

The Quick Brown Fox

The half-leading above and below every text block is invisible but real — it controls the apparent spacing even when you set margin to 0.

A second heading

The gap between heading and paragraph depends on font metrics you can't see, not on your CSS spacing intent.

With text-box: trim-both

The Quick Brown Fox

With trimming, the top of the H starts exactly at the element's content box. Spacing between elements is purely from margins — designers control it entirely.

A second heading

Same margin, but the gap is now predictable: it's exactly what you set, not font-metric-padding plus your margin.

live article

Toggle trimming to see the invisible leading appear and disappear around headings and paragraphs.

text-box: trim-both applied

Feature

CSS text-box trim

The text-box shorthand property gives authors control over the leading trim applied to a text element's block-start and block-end edges, relative to various font metrics.

Why it matters

Every font comes with built-in padding above the cap-height and below the baseline. This half-leading cannot be removed with margin: 0. Before text-box, designers worked around it with negative margins, padding, or magic-number line-heights — all font-specific hacks.

The property

text-box: trim-both removes the half-leading from both ends. Combined with text-box-edge: cap alphabetic you get headings that align precisely to the cap-height, and with text-box-edge: text body text aligns to its actual bounding box.

/* Remove invisible padding above/below text */
h1, h2, h3 {
  text-box: trim-both;
  text-box-edge: cap alphabetic;
  /* or shorthand: text-box: trim-both cap alphabetic; */
}

p {
  text-box: trim-both;
  text-box-edge: text;
}

/* Now spacing is ONLY from your margins — no font surprises */
h2 { margin-top: 1.5rem; }   /* exactly 1.5rem gap */

before vs after

live article

see also