Spacing

The spacing system provides utility classes for margin and padding using a consistent scale based on 1rem.

Margin Classes

Pattern: .util-margin-<side>-<size>

Sides

Side	Description
top	Top margin only
bottom	Bottom margin only
left	Left margin only
right	Right margin only
all	All four sides
vert	Top and bottom
horiz	Left and right

Examples

The gray area represents the container. The gap between the container edge and the blue box shows the margin applied by the utility class.

Margin on All Sides

Equal lg (1.5rem) margin on all four sides of the inner element.

.util-margin-all-lg

<div class="util-background-light-gray" style="overflow: hidden">
  <div class="util-margin-all-lg util-background-odyssey util-pad-all-md">
    <p>.util-margin-all-lg</p>
  </div>
</div>

Vertical Margin Only

An xl (2.5rem) margin applied only to the top and bottom. Notice the blue box extends to the container edges on the left and right because no horizontal margin is applied.

.util-margin-vert-xl

<div class="util-background-light-gray" style="overflow: hidden">
  <div class="util-margin-vert-xl util-background-odyssey util-pad-all-md">
    <p>.util-margin-vert-xl</p>
  </div>
</div>

Horizontal Margin Only

An xl (2.5rem) margin applied only to the left and right. The blue box touches the top and bottom of the container because no vertical margin is applied.

.util-margin-horiz-xl

<div class="util-background-light-gray" style="overflow: hidden">
  <div class="util-margin-horiz-xl util-background-odyssey util-pad-all-md">
    <p>.util-margin-horiz-xl</p>
  </div>
</div>

Padding Classes

Pattern: .util-pad-<side>-<size>

Uses the same sides and sizes as margin.

.util-pad-all-xl

<div class="util-pad-all-xl util-background-odyssey">
  <p>.util-pad-all-xl</p>
</div>

Spacing Scale

Both margin and padding classes use the same set of size values:

Key	Value
none	0
xs	0.25rem
sm	0.5rem
md	1rem
lg	1.5rem
xl	2.5rem
xxl	3.5rem

Responsive Variants

All spacing classes support responsive breakpoint suffixes:

<div class="util-margin-top-md util-margin-top-xl@md util-margin-top-xxl@lg">
  Responsive spacing
</div>

Suffix	Min-width
@sm	30rem (480px)
@md	50rem (800px)
@lg	60rem (960px)
@xl	80rem (1280px)
@print	Print media