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

> How to use text-box-trim and text-box-edge CSS property to solve invisible space issue in list, buttons in frontend design.

- Category: design-engineering
- URL: https://www.indrabuildswebsites.com/blog/design-engineering/fix-invisible-space-with-text-box-trim
- Published: 2026-09-19
- Tags: text-box-trim, text-box-edge, css, frontend design, design engineering
- Source: https://github.com/Indra-photon/sidefolio/blob/main/content/blog/design-engineering/fix-invisible-space-with-text-box-trim.mdx

## 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.

> **Interactive demo: Text Box Trim.** Open https://www.indrabuildswebsites.com/blog/design-engineering/fix-invisible-space-with-text-box-trim to try it.

## 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).

```css
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?

```css
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:

**CSS**

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

**Tailwind**

```html
<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:

> **Interactive demo: Text Box Trim.** Open https://www.indrabuildswebsites.com/blog/design-engineering/fix-invisible-space-with-text-box-trim to try it.

## 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.

> **Interactive demo: Text Box Playground.** Open https://www.indrabuildswebsites.com/blog/design-engineering/fix-invisible-space-with-text-box-trim to try it.

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.

## Resources

- [text-box-edge - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-box-edge): Which font metrics define the top and bottom edge of a text box.
- [text-box-trim - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-box-trim): Which sides of the text box get trimmed.