Spacing Helpers

Collection of helpers for setting spacing of elements

Not only do we have cool utility shorthand for padding and margin, but we also have our nifty spacing helpers! These make it super easy to set up different spaces all at once.

--px

The --px helper anchors adds equal padding on both sides of the horizontal axis of an element. The value of this helper collectively sets padding-left and padding-right CSS properties.

<div style="--px:15px;"> ... </div>

--py

The --py helper anchors adds equal padding on both sides of the vertical axis of an element. The value of this helper collectively sets padding-top and padding-bottom CSS properties.

<div style="--py:15px;"> ... </div>

--mx

The --mx helper anchors adds equal margin on both sides of the horizontal axis of an element. The value of this helper collectively sets margin-left and margin-right CSS properties.

<div style="--mx:15px;"> ... </div>

--my

The --my helper anchors adds equal margin on both sides of the vertical axis of an element. The value of this helper collectively sets margin-top and margin-bottom CSS properties.

<div style="--my:15px;"> ... </div>