Spacing

Overview

The spacing utilities are used to control margin, padding, and gap between elements.

Base variable: $spacer: 1rem

The spacing scale is based on a base spacer value and provides a consistent set of spacing values.

0: 0

1: 0.25rem (4px)

2: 0.5rem (8px)

3: 1rem (16px)

4: 1.5rem (24px)

5: 3rem (48px)

Control the margin of an element using the m-* classes.

.m-3 (margin on all sides)

.mt-3 (margin top)

.mr-3 (margin right)

.mb-3 (margin bottom)

.ml-3 (margin left)

.mx-3 (margin left and right)

.my-3 (margin top and bottom)

.mx-auto (center horizontally)

Control the padding of an element using the p-* classes.

.p-3 (padding on all sides)

.pt-3 (padding top)

.pr-3 (padding right)

.pb-3 (padding bottom)

.pl-3 (padding left)

.px-3 (padding left and right)

.py-3 (padding top and bottom)

Control the gap between flex and grid items using the gap-* classes.

.gap-1 (0.25rem)

Item

.gap-2 (0.5rem)

Item

.gap-3 (1rem)

Item

.gap-4 (1.5rem)

Item