CSS text-box-trim Demo — Free Font Leading Trim Comparison

<div class="demo-wrap">
  <p class="demo-note">Every font has invisible padding above and below its glyphs, baked into its metrics &mdash; it's why a heading never sits flush against a border or icon. The new CSS <code>text-box-trim</code> / <code>text-box-edge</code> properties trim that space off directly. Compare the two boxes below; both use the exact same font, size, and border.</p>

  <div class="compare-row">
    <div class="compare-box">
      <span class="compare-label">Default (untrimmed)</span>
      <div class="sample-box default-box">
        <span class="icon-chip" aria-hidden="true">&#9733;</span>
        <h2>Featured</h2>
      </div>
      <p class="compare-caption">Notice the gap above "Featured" and below it &mdash; that's leading from the font's own metrics, not padding you set.</p>
    </div>

    <div class="compare-box">
      <span class="compare-label">text-box-trim: both</span>
      <div class="sample-box trimmed-box">
        <span class="icon-chip" aria-hidden="true">&#9733;</span>
        <h2>Featured</h2>
      </div>
      <p class="compare-caption">The heading's text now sits flush against the box edges, aligned with the icon and border with no manual offset hacks.</p>
    </div>
  </div>

  <div class="fallback-note">
    <strong>Support note:</strong> <code>text-box-trim</code> is very new and not yet supported everywhere. The <code>@supports not</code> fallback below simply leaves the default spacing in place &mdash; nothing breaks, it just isn't trimmed there.
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body{font-family: system-ui, -apple-system, sans-serif; background: #f4f2ec; color: #26221a; min-height: 100vh;display:flex;align-items:center;justify-content:center}

.demo-wrap { max-width: 640px; margin: 0 auto; padding: 40px 20px 60px; }
.demo-note { font-size: 12.5px; color: #6b6455; line-height: 1.65; background: #fff; border: 1px solid #e6e1d3; border-radius: 10px; padding: 14px 16px; margin-bottom: 26px; }
.demo-note code { font-family: 'SFMono-Regular', Consolas, monospace; color: #b45309; }

.compare-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.compare-box { display: flex; flex-direction: column; gap: 8px; }
.compare-label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #a8895c; }

.sample-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 2px solid #26221a;
  border-radius: 10px;
  padding: 14px 16px;
}
.icon-chip { font-size: 20px; color: #b45309; line-height: 1; }
.sample-box h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; background: #fef3c7; }

.compare-caption { font-size: 12px; color: #7a7460; line-height: 1.55; }

/* ---- text-box-trim ----
   Font metrics reserve space above the cap-height/ascent and below the
   descent for accents and descenders across the whole font, even on
   glyphs that don't use it — that reserved space is why a heading never
   sits perfectly flush against a border, icon, or another box, no matter
   how precisely you zero out margin/padding. text-box-trim removes that
   reserved space from the specified edge(s) of the text's own box;
   text-box-edge chooses which metric (cap-height, text, etc.) to trim to. */
.trimmed-box h2 {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* Fallback: no-op. Because normal text flow with the reserved leading is
   already a completely valid, readable layout, an unsupporting browser
   simply keeps the small visual gap around the heading — nothing breaks,
   it just isn't flush the way the trimmed box is. */
@supports not (text-box-trim: trim-both) {
  .trimmed-box h2 {
    /* Intentionally empty: default font leading remains, which still
       renders correctly, just without the flush alignment. */
  }
}

// No JavaScript: text-box-trim is a pure CSS property, and its fallback
// is simply the browser's default (untrimmed) text box — nothing to
// detect or patch from script.