Typographic alignment with text-box-trim

Baseline 2026 Reference ↗

Trim the extra typographic space above and below a heading to align it more closely with surrounding graphics or a card edge.

<style>
  .heading {
    margin: 0;
    font: 700 3rem / 1.2 system-ui;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
</style>

<h2 class="heading">A closer fit</h2>

text-box-trim chooses which outer edges to trim. text-box-edge: cap alphabetic uses the font’s capital-height metric at the top and alphabetic baseline at the bottom.

This trims the block’s outer typographic space, not each glyph’s visible bounding box. Descenders can extend below the baseline; it is not an instruction to crop the letters. Test real fonts, languages and multiline headings.

Margins and padding remain separate: margin: 0 removes the heading’s default margin. Both properties are Baseline 2026; older browsers retain the usual line-box spacing.