v149 · CSS

Button Centering

Button padding is specified in CSS units, but text sits inside an invisible em-square that adds space above the cap height and below the baseline. text-box: trim-both cap alphabetic strips that invisible space, so the padding value you write is the actual optical gap the user sees.

Without text-box — invisible leading inflates top/bottom padding

Button variants

Size scale

Filled & pill variants

Without text-box

Yellow bands = actual padding.
Text floats above true centre.

With text-box: trim-both cap alphabetic

Yellow bands = actual padding.
Cap-height centred in button.

/* Apply on the text label, not the button itself */
.btn-label {
  text-box: trim-both cap alphabetic;
}

/* Equivalent longhand */
.btn-label {
  text-box-trim: both;      /* trim start AND end */
  text-box-edge: cap alphabetic; /* trim to cap / alphabetic baseline */
}

implementation reference

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

see also

implementation reference