The Cosmic theme now offers a set of class names that can be applied to provide consistent margins and padding (and other spacing) between elements.
Note: These features require your site to be using UO Core/Cosmic version 21.05 or newer.

Margins and Padding

If you need to add spacing between elements, such as a margin or padding around an element, you can apply easy, consistent fixed margins and padding using the following classes. This spacing is used throughout the theme and design framework, so your use of these classes will be consistent with the rest of the theme.

A series of utility classes for achieving consistent spacing. These classes, applied in html, are preferred to controlling margins on elements via CSS. Project-wide CSS is typically littered with lots of rulesets that only declare margins on an element. These utilities help reduce overall css sizes, help eliminate magic numbers, and help create in-page and page-to-page visual harmony.

The classnames use the following shorthand:

m = margin
p = padding

t = top
r = right
b = bottom
l = left

x = x-axis
y = y-axis

0 = zero

1 = applies value 0.4rem; //   7.2px
2 = applies value 0.8rem; //  14.4px
3 = applies value 1.6rem; //  28.8px
4 = applies value 2.4rem; //  43.2px
5 = applies value 3.2rem; //  57.6px
6 = applies value 4rem;   //    72px
7 = applies value 4.8rem; //  86.4px
8 = applies value 5.6rem; // 100.8px
9 = applies value 6.4rem; // 115.2px

Vertical (Y AXIS) Margins

Horizontal (X AXIS) Margins