Text Box Trim

You set padding: 12px on a badge. It still looks vertically off. The font added invisible space above the capital letter that your spacing token never accounted for.

The Principle

Most typefaces include whitespace above cap heightThe height of capital letters in a typeface. The top edge capital letters reach. and below the baselineThe line most letters sit on. Descenders drop below it. for ascenders, descenders, and diacritics. text-box trimCSS that trims a font's internal line-box padding for tighter vertical alignment. removes that space so text aligns with borders, buttons, and neighboring elements.

The Rule I Follow

I trim badges, buttons, and card titles where alignment matters. Long-form body text keeps the font's default metrics.

Try It Yourself

Toggle trim and watch the dashed box hug the badge and heading.

Without trim, invisible space above the cap height separates the ink from the border. With trim, the element box starts where the letters do.

The Mistake I'd Avoid

Trying to compensate for font metrics with random padding values. Fix the typography before adjusting the layout.

Remember This

Typography isn't always as tall as the box it lives in.

h1, h2, h3,
.badge {
text-box-trim: trim-both; /* remove font leading above and below */
text-box-edge: cap alphabetic; /* trim to cap height and baseline */
}

h1, h2, h3,
.badge {
text-box-trim: trim-both; /* remove font leading above and below */
text-box-edge: cap alphabetic; /* trim to cap height and baseline */
}