v133 · css

Component Spacing

A design system component kit — buttons, cards, badges, list items — with text-box: trim-both applied to every text element. Toggle trimming on/off and overlay bounding boxes to see how half-leading inflates component height and padding intent.

Feature detection: checking…

With trimming ON, padding in buttons and card headers goes exactly where you intend. With trimming OFF, invisible half-leading inflates the visual height silently.

Buttons
New Beta Deprecated
Card
Notification title
Your export is ready. The file contains 1,240 records from the past 30 days.
2 minutes ago · 4.2 MB
List
CPU34%
Memory6.2 GB
Disk I/O48 MB/s
Network12 Mb/s
Tight layout
$129.00
In stock Free shipping
Premium mechanical keyboard — full-size, per-key RGB, hot-swap switches.

spacing impact

ComponentWithout trimWith trimImpact
Button (height 36px) Visual height ≈ 36px, but text doesn't sit centred — half-leading inflates Text cap-height exactly centred in the 36px box Pixel-perfect vertical alignment
Card title 0.75rem padding + half-leading → apparent gap varies by font 0.75rem padding = actual visible gap above cap-height Consistent padding across fonts
Badge padding-block can't reliably size badge — leading inflates height Badge height = font-size + 2 × padding-block exactly Predictable height
Tight price layout Price, badge, body paragraph gap = magic-number tuning per font margin-block = gap, period. No font-specific hackery Font-agnostic spacing 
/* Apply trim system-wide in your design system */
:root {
  --text-box-heading: trim-both cap alphabetic;
  --text-box-body: trim-both text;
  --text-box-label: trim-both cap alphabetic;
}

h1, h2, h3 { text-box: var(--text-box-heading); }
p, li       { text-box: var(--text-box-body); }
.label      { text-box: var(--text-box-label); }

/* Now padding and margin are predictable across all fonts */
.button { height: 36px; /* exactly contains cap-height */ }

see also