v149 · CSS

CSS text-box

Trim the invisible leading space that line-height adds above the cap height and below the alphabetic baseline. Headings, buttons, and icons can finally align flush without magic negative margins.

concepts

  1. Trim Basics

    Side-by-side comparison of a heading and body text with and without text-box: trim-both cap alphabetic. Toggle trim on and off and move a ruler overlay to see exactly how much invisible space gets removed.

  2. Icon Alignment

    A row of icon + label pairs. Without text-box the text optically floats above the icon centre; with it, cap height and icon midline snap together. Toggle between modes to feel the difference.

  3. Heading Flush Against a Box

    A coloured pull-quote box where the heading letters need to sit flush against the left border. The classic approach uses a negative margin hack; text-box achieves it cleanly — and shows why the fallback differs per font.

  4. Trim Playground

    Interactive controls for every text-box-trim value (none, trim-start, trim-end, trim-both) and common text-box-edge presets. Live preview with a coloured background to make leading visible.

  5. Button Centering

    A full set of button variants (sizes, filled, pill) where toggling text-box: trim-both cap alphabetic on the label shows how the invisible leading inflates the visual top-to-bottom padding. Before: text floats above true centre. After: cap height is optically centred in the button.

  6. Card Grid Rhythm

    A six-card article grid where each heading has a coloured background to reveal the invisible leading region. Toggle text-box on and off to see how trimming makes the top padding you wrote match the gap the eye actually perceives — across headings of different lengths.

why it shipped

Every typographic system has the same problem: line-height distributes extra space equally above and below the text, but visually it does not sit centred — cap height is shorter than the full em square, and the ascender/descender regions are rarely equal. This means a heading placed against a coloured box or an icon always looks slightly off, and the fix has always been trial-and-error with negative margins that depend on the specific font. text-box exposes what browsers already know — exactly where the cap height and alphabetic baseline are — and lets authors trim to those edges, making optical alignment a one-liner that works across fonts.

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗