How you can fix invisible space issue with 2 lines of CSS

The issue

There is an invisible space around your buttons and card items. It causes optical misalignment and makes the UI look off, the kind of detail that reads as AI slop.

When you design a button, or the description in a card list, you give it equal padding on every side and it still looks unbalanced. The reason is font geometry: the line box a font reserves above and below the letters is bigger than the letters themselves, so "equal" padding is not equal to the eye.

Switch to the skeleton to see it. The hatched bands are the space the font claims above the capitals and below the baseline; the padding is identical on every side.

The solution

Two CSS properties fix it: text-box-edge and text-box-trim.

text-box-edge specifies which font metrics define the edges of a text element's box. It takes two values: the first is the over / top edge (block-start), the second is the under / bottom edge (block-end).

text-box-edge: text text;       /* normal text/font metrics on both sides */
text-box-edge: text alphabetic; /* normal metrics on top, alphabetic baseline at the bottom */
text-box-edge: cap alphabetic;  /* from cap height down to the alphabetic baseline */
text-box-edge: ex text;         /* from x-height down to the normal text edge */

text-box-trim answers the question: which sides of the existing text box should be trimmed?

text-box-trim: none;
text-box-trim: trim-start; /* trims the box at the top */
text-box-trim: trim-end;   /* trims the box at the bottom */
text-box-trim: trim-both;  /* trims both top and bottom */

The fix

The typical setting that removes the extra space around the font is:

.my-button {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

<button class="[text-box-trim:trim-both] [text-box-edge:cap_alphabetic] px-4 py-2">
  Save changes
</button>

With this, the invisible space is gone and the button reads as visually balanced. Same demo, now with a third state that applies the two lines:

Playground

Pick a trim mode and the two edges. The left box applies the real CSS; the right one shows where each edge sits on the font and what gets cut.

text-box-trim: trim-both;
text-box-edge: cap alphabetic;

Browser support is recent (Chrome 133+, Safari 18.2+), and unsupported browsers simply ignore the two lines, so there is no downside to shipping it today.

Finally

Thank you for reading. Share your feedback, and see you in the next one.