CSS custom properties centering

Set only --py and derive the rest

Buttons with icons fight you on baseline, icon size, and padding. One CSS variable --py drives horizontal padding, icon size, and margin so the control 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

tinted lines trace the --py and --px variables across the file.