CSS Custom Properties Magic

Set only --py and derive everything else

Buttons with icons are notoriously hard to center perfectly. The text baseline, icon size, and padding all fight each other. This technique uses a single CSS variable --py to derive all other spacing — horizontal padding, icon dimensions, and margin — so everything stays optically centered at any scale.

Technology

Controls

--py(the only thing you set)0.875em

font-size18px

Calculated Values

--px

calc(var(--py) + (1lh-1cap)/2)

1.275em

padding

var(--py) var(--px)

0.875em 1.275em

icon size

1lh

1.5em

icon margin-right

calc(var(--py) - var(--px))

-0.400em

Source

--py · --px — definitions and usages

src

src/tag.csslive

Tree UI via @pierre/trees. Source rendered with @pierre/diffs; tinted lines trace the --py and --px variables across the file.