Design Atlas
한국어
{} Modern CSS & web APIs

text-box-trim

Trims the leading whitespace a font leaves above/below text so the box hugs the glyphs exactly.

Also known as: text-boxLeading trim
···
html
<div class="wrap">
  <div class="badge" id="badge"><svg viewBox="0 0 10 10"><path id="bpath" d="M1.5 5.2l2.6 2.6L8.5 2.4" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg><span id="btext">확인 중</span></div>
  <div class="row">
    <div class="tag"><span id="a" class="txt">Trim</span></div>
    <div class="tag"><span id="b" class="txt notrim">No trim</span></div>
  </div>
</div>
css
.wrap{position:relative;width:min(280px,92%)}
.row{display:flex;gap:10px}
.tag{border:1.5px dashed var(--accent-2);border-radius:8px;background:var(--surface)}
.txt{display:block;font-size:22px;font-weight:800;color:var(--fg);text-box-trim:trim-both;text-box-edge:cap alphabetic}
.txt.notrim{text-box-trim:none}
.txt.fallback-trim{text-box-trim:none;line-height:1;margin-block:-4px}
.badge{position:absolute;top:-30px;right:0;display:flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;font-size:10px;font-weight:700;background:var(--bg);border:1px solid var(--line);color:var(--accent-3)}
.badge.no{color:var(--accent-2)}
.badge svg{width:9px;height:9px}
js
const ok = CSS.supports('text-box-trim', 'trim-both');
const b=document.getElementById('badge'),p=document.getElementById('bpath'),t=document.getElementById('btext');
b.classList.toggle('no', !ok);
p.setAttribute('d', ok ? 'M1.5 5.2l2.6 2.6L8.5 2.4' : 'M2 2l6 6M8 2l-6 6');
t.textContent = ok ? 'text-box-trim 지원됨' : '미지원 · 음수 margin 폴백';
if (!ok) document.getElementById('a').classList.add('fallback-trim');

Every font reserves whitespace above and below glyphs for line-height calculations. That means padding or gap measured in a design tool like Figma never quite matches what a browser renders. The workaround has been lowering line-height to 1 or hand-tuning negative margins to cancel the invisible space.

`text-box-trim: trim-both` with `text-box-edge` (e.g. `cap alphabetic`) trims the box to the cap-height and baseline, bringing browser rendering much closer to Figma's "Trim vertical padding" option.

Check caniuse/MDN baseline for support. Without it, the only option is measuring font-specific negative margins by hand — and re-measuring whenever the font changes.

When to use

Reproducing Figma text spacing pixel-for-pixel, or vertically centering text precisely inside a button or badge.