Spacing

Helper classes for padding and margin.

Class pattern

has-{property}{direction}-{size}

• Property: p (padding) or m (margin)
• Direction: x, y, t, b, l, r (or omit for all sides)
• Size: 2xs, xs, s, m, l, xl, 2xl, 3xl, 4xl (or omit for default)

Quick reference

Examples

<!-- Card with medium padding -->
<div class="has-p-m">Card content</div>

<!-- Section with large vertical padding -->
<section class="has-py-xl">Section content</section>

<!-- Center a block element -->
<div class="has-mx-a" style="max-width: 800px">Centered</div>

<!-- Spacing between stacked items -->
<div class="has-mt-l">First item</div>
<div class="has-mt-l">Second item</div>

Auto margin

Use a as the size to set margin to auto:

<div class="has-mx-a">Horizontally centered</div>
<div class="has-ml-a">Pushed to the right</div>

Available sizes

See Spacing Variables for fluid paired sizes like s-l and m-xl.

Configuration

:root {
  --space-default: var(--space-s-l);
}