Spacing

Utilities for controlling margin, padding, and gap. Step is 4px: value N → N × 4px.

Side abbreviations

Suffix

Sides

(none)

all sides

t

top

b

bottom

l

left

r

right

x

left + right

y

top + bottom

Margin

Class

Property

Value

ma-{n}

margin

n × 4px

mt-{n}

margin-top

n × 4px

mb-{n}

margin-bottom

n × 4px

ml-{n}

margin-left

n × 4px

mr-{n}

margin-right

n × 4px

mx-{n}

margin-left + margin-right

n × 4px

my-{n}

margin-top + margin-bottom

n × 4px

ma-auto

margin

auto

mx-auto

margin-left + margin-right

auto

Padding

Class

Property

Value

pa-{n}

padding

n × 4px

pt-{n}

padding-top

n × 4px

pb-{n}

padding-bottom

n × 4px

pl-{n}

padding-left

n × 4px

pr-{n}

padding-right

n × 4px

px-{n}

padding-left + padding-right

n × 4px

py-{n}

padding-top + padding-bottom

n × 4px

Gap

Class

Property

Value

gap-{n}

gap

n × 4px

gap-x-{n}

column-gap

n × 4px

gap-y-{n}

row-gap

n × 4px

Value table

n

px

0

0px

1

4px

2

8px

3

12px

4

16px

5

20px

6

24px

7

28px

8

32px

9

36px

10

40px

11

44px

12

48px

13

52px

14

56px

15

60px

16

64px

17

68px

18

72px

19

76px

20

80px

Responsive variants

Add a breakpoint prefix before the class:

<div class="pa-2 sm:pa-4 md:pa-6 lg:pa-8">
  Responsive padding
</div>

<div class="d-flex gap-2 md:gap-6">
  Responsive gap
</div>

Examples

<!-- Margin -->
<div class="ma-4">margin: 16px on all sides</div>
<div class="mt-2 mb-6">margin-top: 8px; margin-bottom: 24px</div>
<div class="mx-auto">horizontally centered</div>

<!-- Padding -->
<div class="pa-6">padding: 24px on all sides</div>
<div class="px-4 py-2">padding: 8px top/bottom, 16px left/right</div>

<!-- Flex gap -->
<div class="d-flex gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<div class="d-flex gap-x-4 gap-y-2 flex-wrap">
  <!-- gap-x between columns, gap-y between rows -->
</div>