CSS Text Box Trim

• 1 min read
css

Text always has weird extra space above capitals and below the baseline.

Text box trim

Just a simple two-line fix, perfectly trims the text box to the actual glyph bounds. No more padding hacks.

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

As of early 2025, text-box-trim is available by default in Chrome 133+, Edge 133+, and Safari 18.2+ (sadly no Firefox womp womp).