0
# Spacing Utilities
1

2
PrimeFlex provides comprehensive spacing utilities for padding and margin using a consistent scale. The spacing system supports directional control, auto margins, negative margins, and responsive variants.
3

4
## Spacing Scale
5

6
The spacing scale is based on a `1rem` base unit with the following values:
7

8
- `0`: 0
9
- `1`: 0.25rem (4px)
10
- `2`: 0.5rem (8px)
11
- `3`: 1rem (16px)
12
- `4`: 1.5rem (24px)
13
- `5`: 2rem (32px)
14
- `6`: 3rem (48px)
15
- `7`: 4rem (64px)
16
- `8`: 5rem (80px)
17

18
## Padding Utilities
19

20
```scss { .api }
21
// All sides padding
22
.p-0 { padding: 0; }
23
.p-1 { padding: 0.25rem; }
24
.p-2 { padding: 0.5rem; }
25
.p-3 { padding: 1rem; }
26
.p-4 { padding: 1.5rem; }
27
.p-5 { padding: 2rem; }
28
.p-6 { padding: 3rem; }
29
.p-7 { padding: 4rem; }
30
.p-8 { padding: 5rem; }
31

32
// Top padding
33
.pt-0 { padding-top: 0; }
34
.pt-1 { padding-top: 0.25rem; }
35
.pt-2 { padding-top: 0.5rem; }
36
.pt-3 { padding-top: 1rem; }
37
.pt-4 { padding-top: 1.5rem; }
38
.pt-5 { padding-top: 2rem; }
39
.pt-6 { padding-top: 3rem; }
40
.pt-7 { padding-top: 4rem; }
41
.pt-8 { padding-top: 5rem; }
42

43
// Right padding
44
.pr-0 { padding-right: 0; }
45
.pr-1 { padding-right: 0.25rem; }
46
.pr-2 { padding-right: 0.5rem; }
47
.pr-3 { padding-right: 1rem; }
48
.pr-4 { padding-right: 1.5rem; }
49
.pr-5 { padding-right: 2rem; }
50
.pr-6 { padding-right: 3rem; }
51
.pr-7 { padding-right: 4rem; }
52
.pr-8 { padding-right: 5rem; }
53

54
// Bottom padding
55
.pb-0 { padding-bottom: 0; }
56
.pb-1 { padding-bottom: 0.25rem; }
57
.pb-2 { padding-bottom: 0.5rem; }
58
.pb-3 { padding-bottom: 1rem; }
59
.pb-4 { padding-bottom: 1.5rem; }
60
.pb-5 { padding-bottom: 2rem; }
61
.pb-6 { padding-bottom: 3rem; }
62
.pb-7 { padding-bottom: 4rem; }
63
.pb-8 { padding-bottom: 5rem; }
64

65
// Left padding
66
.pl-0 { padding-left: 0; }
67
.pl-1 { padding-left: 0.25rem; }
68
.pl-2 { padding-left: 0.5rem; }
69
.pl-3 { padding-left: 1rem; }
70
.pl-4 { padding-left: 1.5rem; }
71
.pl-5 { padding-left: 2rem; }
72
.pl-6 { padding-left: 3rem; }
73
.pl-7 { padding-left: 4rem; }
74
.pl-8 { padding-left: 5rem; }
75

76
// Horizontal padding (left + right)
77
.px-0 { padding-left: 0; padding-right: 0; }
78
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
79
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
80
.px-3 { padding-left: 1rem; padding-right: 1rem; }
81
.px-4 { padding-left: 1.5rem; padding-right: 1.5rem; }
82
.px-5 { padding-left: 2rem; padding-right: 2rem; }
83
.px-6 { padding-left: 3rem; padding-right: 3rem; }
84
.px-7 { padding-left: 4rem; padding-right: 4rem; }
85
.px-8 { padding-left: 5rem; padding-right: 5rem; }
86

87
// Vertical padding (top + bottom)
88
.py-0 { padding-top: 0; padding-bottom: 0; }
89
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
90
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
91
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }
92
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
93
.py-5 { padding-top: 2rem; padding-bottom: 2rem; }
94
.py-6 { padding-top: 3rem; padding-bottom: 3rem; }
95
.py-7 { padding-top: 4rem; padding-bottom: 4rem; }
96
.py-8 { padding-top: 5rem; padding-bottom: 5rem; }
97
```
98

99
## Margin Utilities
100

101
```scss { .api }
102
// All sides margin
103
.m-0 { margin: 0; }
104
.m-1 { margin: 0.25rem; }
105
.m-2 { margin: 0.5rem; }
106
.m-3 { margin: 1rem; }
107
.m-4 { margin: 1.5rem; }
108
.m-5 { margin: 2rem; }
109
.m-6 { margin: 3rem; }
110
.m-7 { margin: 4rem; }
111
.m-8 { margin: 5rem; }
112

113
// Top margin
114
.mt-0 { margin-top: 0; }
115
.mt-1 { margin-top: 0.25rem; }
116
.mt-2 { margin-top: 0.5rem; }
117
.mt-3 { margin-top: 1rem; }
118
.mt-4 { margin-top: 1.5rem; }
119
.mt-5 { margin-top: 2rem; }
120
.mt-6 { margin-top: 3rem; }
121
.mt-7 { margin-top: 4rem; }
122
.mt-8 { margin-top: 5rem; }
123

124
// Right margin
125
.mr-0 { margin-right: 0; }
126
.mr-1 { margin-right: 0.25rem; }
127
.mr-2 { margin-right: 0.5rem; }
128
.mr-3 { margin-right: 1rem; }
129
.mr-4 { margin-right: 1.5rem; }
130
.mr-5 { margin-right: 2rem; }
131
.mr-6 { margin-right: 3rem; }
132
.mr-7 { margin-right: 4rem; }
133
.mr-8 { margin-right: 5rem; }
134

135
// Bottom margin
136
.mb-0 { margin-bottom: 0; }
137
.mb-1 { margin-bottom: 0.25rem; }
138
.mb-2 { margin-bottom: 0.5rem; }
139
.mb-3 { margin-bottom: 1rem; }
140
.mb-4 { margin-bottom: 1.5rem; }
141
.mb-5 { margin-bottom: 2rem; }
142
.mb-6 { margin-bottom: 3rem; }
143
.mb-7 { margin-bottom: 4rem; }
144
.mb-8 { margin-bottom: 5rem; }
145

146
// Left margin
147
.ml-0 { margin-left: 0; }
148
.ml-1 { margin-left: 0.25rem; }
149
.ml-2 { margin-left: 0.5rem; }
150
.ml-3 { margin-left: 1rem; }
151
.ml-4 { margin-left: 1.5rem; }
152
.ml-5 { margin-left: 2rem; }
153
.ml-6 { margin-left: 3rem; }
154
.ml-7 { margin-left: 4rem; }
155
.ml-8 { margin-left: 5rem; }
156

157
// Horizontal margin (left + right)
158
.mx-0 { margin-left: 0; margin-right: 0; }
159
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
160
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
161
.mx-3 { margin-left: 1rem; margin-right: 1rem; }
162
.mx-4 { margin-left: 1.5rem; margin-right: 1.5rem; }
163
.mx-5 { margin-left: 2rem; margin-right: 2rem; }
164
.mx-6 { margin-left: 3rem; margin-right: 3rem; }
165
.mx-7 { margin-left: 4rem; margin-right: 4rem; }
166
.mx-8 { margin-left: 5rem; margin-right: 5rem; }
167

168
// Vertical margin (top + bottom)
169
.my-0 { margin-top: 0; margin-bottom: 0; }
170
.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
171
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
172
.my-3 { margin-top: 1rem; margin-bottom: 1rem; }
173
.my-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
174
.my-5 { margin-top: 2rem; margin-bottom: 2rem; }
175
.my-6 { margin-top: 3rem; margin-bottom: 3rem; }
176
.my-7 { margin-top: 4rem; margin-bottom: 4rem; }
177
.my-8 { margin-top: 5rem; margin-bottom: 5rem; }
178
```
179

180
## Auto Margins
181

182
```scss { .api }
183
.m-auto { margin: auto; }
184
.mt-auto { margin-top: auto; }
185
.mr-auto { margin-right: auto; }
186
.mb-auto { margin-bottom: auto; }
187
.ml-auto { margin-left: auto; }
188
.mx-auto { margin-left: auto; margin-right: auto; }
189
.my-auto { margin-top: auto; margin-bottom: auto; }
190
```
191

192
## Negative Margins
193

194
```scss { .api }
195
// Negative all sides margin
196
.-m-1 { margin: -0.25rem; }
197
.-m-2 { margin: -0.5rem; }
198
.-m-3 { margin: -1rem; }
199
.-m-4 { margin: -1.5rem; }
200
.-m-5 { margin: -2rem; }
201
.-m-6 { margin: -3rem; }
202
.-m-7 { margin: -4rem; }
203
.-m-8 { margin: -5rem; }
204

205
// Negative top margin
206
.-mt-1 { margin-top: -0.25rem; }
207
.-mt-2 { margin-top: -0.5rem; }
208
.-mt-3 { margin-top: -1rem; }
209
.-mt-4 { margin-top: -1.5rem; }
210
.-mt-5 { margin-top: -2rem; }
211
.-mt-6 { margin-top: -3rem; }
212
.-mt-7 { margin-top: -4rem; }
213
.-mt-8 { margin-top: -5rem; }
214

215
// Negative right margin
216
.-mr-1 { margin-right: -0.25rem; }
217
.-mr-2 { margin-right: -0.5rem; }
218
.-mr-3 { margin-right: -1rem; }
219
.-mr-4 { margin-right: -1.5rem; }
220
.-mr-5 { margin-right: -2rem; }
221
.-mr-6 { margin-right: -3rem; }
222
.-mr-7 { margin-right: -4rem; }
223
.-mr-8 { margin-right: -5rem; }
224

225
// Negative bottom margin
226
.-mb-1 { margin-bottom: -0.25rem; }
227
.-mb-2 { margin-bottom: -0.5rem; }
228
.-mb-3 { margin-bottom: -1rem; }
229
.-mb-4 { margin-bottom: -1.5rem; }
230
.-mb-5 { margin-bottom: -2rem; }
231
.-mb-6 { margin-bottom: -3rem; }
232
.-mb-7 { margin-bottom: -4rem; }
233
.-mb-8 { margin-bottom: -5rem; }
234

235
// Negative left margin
236
.-ml-1 { margin-left: -0.25rem; }
237
.-ml-2 { margin-left: -0.5rem; }
238
.-ml-3 { margin-left: -1rem; }
239
.-ml-4 { margin-left: -1.5rem; }
240
.-ml-5 { margin-left: -2rem; }
241
.-ml-6 { margin-left: -3rem; }
242
.-ml-7 { margin-left: -4rem; }
243
.-ml-8 { margin-left: -5rem; }
244

245
// Negative horizontal margin
246
.-mx-1 { margin-left: -0.25rem; margin-right: -0.25rem; }
247
.-mx-2 { margin-left: -0.5rem; margin-right: -0.5rem; }
248
.-mx-3 { margin-left: -1rem; margin-right: -1rem; }
249
.-mx-4 { margin-left: -1.5rem; margin-right: -1.5rem; }
250
.-mx-5 { margin-left: -2rem; margin-right: -2rem; }
251
.-mx-6 { margin-left: -3rem; margin-right: -3rem; }
252
.-mx-7 { margin-left: -4rem; margin-right: -4rem; }
253
.-mx-8 { margin-left: -5rem; margin-right: -5rem; }
254

255
// Negative vertical margin
256
.-my-1 { margin-top: -0.25rem; margin-bottom: -0.25rem; }
257
.-my-2 { margin-top: -0.5rem; margin-bottom: -0.5rem; }
258
.-my-3 { margin-top: -1rem; margin-bottom: -1rem; }
259
.-my-4 { margin-top: -1.5rem; margin-bottom: -1.5rem; }
260
.-my-5 { margin-top: -2rem; margin-bottom: -2rem; }
261
.-my-6 { margin-top: -3rem; margin-bottom: -3rem; }
262
.-my-7 { margin-top: -4rem; margin-bottom: -4rem; }
263
.-my-8 { margin-top: -5rem; margin-bottom: -5rem; }
264
```
265

266
## Responsive Variants
267

268
All spacing utilities support responsive breakpoints:
269

270
```scss { .api }
271
// Small screens (≥576px)
272
.sm\\:p-3 { /* padding: 1rem at sm+ */ }
273
.sm\\:m-4 { /* margin: 1.5rem at sm+ */ }
274
.sm\\:mx-auto { /* margin-left: auto; margin-right: auto at sm+ */ }
275
// ... all spacing classes with sm: prefix
276

277
// Medium screens (≥768px)
278
.md\\:p-6 { /* padding: 3rem at md+ */ }
279
.md\\:mb-0 { /* margin-bottom: 0 at md+ */ }
280
// ... all spacing classes with md: prefix
281

282
// Large screens (≥992px)
283
.lg\\:px-8 { /* padding-left: 5rem; padding-right: 5rem at lg+ */ }
284
.lg\\:my-6 { /* margin-top: 3rem; margin-bottom: 3rem at lg+ */ }
285
// ... all spacing classes with lg: prefix
286

287
// Extra large screens (≥1200px)
288
.xl\\:p-8 { /* padding: 5rem at xl+ */ }
289
.xl\\:-mt-4 { /* margin-top: -1.5rem at xl+ */ }
290
// ... all spacing classes with xl: prefix
291
```
292

293
## Usage Examples
294

295
### Card with Consistent Spacing
296

297
```html
298
<div class="p-4 surface-card border-round shadow-2">
299
  <h3 class="m-0 mb-3 text-primary">Card Title</h3>
300
  <p class="m-0 mb-4 text-color-secondary line-height-3">
301
    Card content with consistent spacing between elements.
302
  </p>
303
  <div class="flex gap-2">
304
    <button class="px-3 py-2 bg-primary text-white border-none border-round">
305
      Primary
306
    </button>
307
    <button class="px-3 py-2 border-1 border-primary text-primary bg-transparent border-round">
308
      Secondary
309
    </button>
310
  </div>
311
</div>
312
```
313

314
### Form Layout
315

316
```html
317
<form class="p-4 surface-section border-round">
318
  <div class="mb-4">
319
    <label class="block mb-2 font-semibold">Name</label>
320
    <input type="text" class="w-full p-3 border-1 border-surface-300 border-round">
321
  </div>
322
  <div class="mb-4">
323
    <label class="block mb-2 font-semibold">Email</label>
324
    <input type="email" class="w-full p-3 border-1 border-surface-300 border-round">
325
  </div>
326
  <div class="mb-6">
327
    <label class="block mb-2 font-semibold">Message</label>
328
    <textarea rows="4" class="w-full p-3 border-1 border-surface-300 border-round"></textarea>
329
  </div>
330
  <button type="submit" class="px-4 py-3 bg-primary text-white border-none border-round">
331
    Submit
332
  </button>
333
</form>
334
```
335

336
### Navigation with Auto Margins
337

338
```html
339
<nav class="flex align-items-center p-3 bg-primary">
340
  <div class="flex align-items-center gap-2">
341
    <img src="logo.png" alt="Logo" class="w-2rem h-2rem">
342
    <span class="text-white font-bold">Brand</span>
343
  </div>
344
  <!-- Auto margin pushes content to the right -->
345
  <div class="ml-auto flex gap-3">
346
    <a href="#" class="text-white no-underline px-2 py-1">Home</a>
347
    <a href="#" class="text-white no-underline px-2 py-1">About</a>
348
    <a href="#" class="text-white no-underline px-2 py-1">Contact</a>
349
  </div>
350
</nav>
351
```
352

353
### Responsive Spacing
354

355
```html
356
<div class="p-3 md:p-6 lg:p-8 surface-card border-round">
357
  <h2 class="m-0 mb-2 md:mb-4 text-2xl md:text-3xl font-bold">
358
    Responsive Title
359
  </h2>
360
  <p class="m-0 mb-4 md:mb-6 text-color-secondary">
361
    Content with responsive spacing that adapts to screen size.
362
  </p>
363
  <div class="flex flex-column md:flex-row gap-3 md:gap-4">
364
    <button class="px-4 py-2 md:px-6 md:py-3 bg-primary text-white border-none border-round">
365
      Button 1
366
    </button>
367
    <button class="px-4 py-2 md:px-6 md:py-3 border-1 border-primary text-primary bg-transparent border-round">
368
      Button 2
369
    </button>
370
  </div>
371
</div>
372
```
373

374
### Negative Margin Overlap
375

376
```html
377
<div class="relative">
378
  <div class="h-8rem bg-primary"></div>
379
  <div class="p-4 -mt-4 mx-3 bg-white border-round shadow-2">
380
    <h3 class="m-0 mb-2">Overlapping Card</h3>
381
    <p class="m-0">This card overlaps the element above using negative margin.</p>
382
  </div>
383
</div>
384
```
385

386
### Centered Content
387

388
```html
389
<div class="text-center py-8">
390
  <div class="inline-block mx-auto max-w-30rem">
391
    <h1 class="m-0 mb-4 text-4xl font-bold">Welcome</h1>
392
    <p class="m-0 mb-6 text-lg text-color-secondary">
393
      Centered content block with auto margins and consistent vertical spacing.
394
    </p>
395
    <button class="px-6 py-3 bg-primary text-white border-none border-round">
396
      Get Started
397
    </button>
398
  </div>
399
</div>
400
```