Django-Spellbook

Padding, margin, and gap utilities for controlling space in your layouts.

---

Spacing Scale

All spacing utilities use a consistent scale:

Value	Size	Pixels
0	0	0px
1	0.25rem	4px
2	0.5rem	8px
3	1rem	16px
4	1.5rem	24px
6	2rem	32px
8	3rem	48px

---

Padding

p (all sides)

<div class="sb-p-0 sb-bg-surface sb-text-text sb-border-2 sb-border-neutral">p-0: No padding</div>
<div class="sb-p-1 sb-bg-surface sb-text-text sb-border-2 sb-border-neutral">p-1: 0.25rem</div>
<div class="sb-p-2 sb-bg-surface sb-text-text sb-border-2 sb-border-neutral">p-2: 0.5rem</div>
<div class="sb-p-3 sb-bg-surface sb-text-text sb-border-2 sb-border-neutral">p-3: 1rem</div>
<div class="sb-p-4 sb-bg-surface sb-text-text sb-border-2 sb-border-neutral">p-4: 1.5rem</div>
<div class="sb-p-6 sb-bg-surface sb-text-text sb-border-2 sb-border-neutral">p-6: 2rem</div>

px / py (horizontal / vertical)

<div class="sb-px-6 sb-py-1 sb-bg-surface sb-text-text sb-border-2 sb-border-neutral">px-6 py-1: Wide horizontal</div>
<div class="sb-px-1 sb-py-4 sb-bg-surface sb-text-text sb-border-2 sb-border-neutral">px-1 py-4: Tall vertical</div>

pt / pr / pb / pl (individual sides)

<div class="sb-pt-4 sb-bg-surface sb-text-text sb-border-2 sb-border-neutral">pt-4: Padding top</div>
<div class="sb-pr-6 sb-bg-surface sb-text-text sb-border-2 sb-border-neutral">pr-6: Padding right</div>
<div class="sb-pb-4 sb-bg-surface sb-text-text sb-border-2 sb-border-neutral">pb-4: Padding bottom</div>
<div class="sb-pl-6 sb-bg-surface sb-text-text sb-border-2 sb-border-neutral">pl-6: Padding left</div>

---

Margin

m (all sides)

<!-- Containers show the margin space -->
<div class="sb-bg-neutral-5 sb-p-1">
  <div class="sb-m-0 sb-bg-surface sb-text-text sb-p-2">m-0 inside container</div>
</div>
<div class="sb-bg-neutral-5 sb-p-1">
  <div class="sb-m-2 sb-bg-surface sb-text-text sb-p-2">m-2 inside container</div>
</div>
<div class="sb-bg-neutral-5 sb-p-1">
  <div class="sb-m-4 sb-bg-surface sb-text-text sb-p-2">m-4 inside container</div>
</div>

mb (margin bottom) - Most common

<div class="sb-bg-surface sb-text-text sb-p-3 sb-mb-2 sb-border-2 sb-border-neutral">mb-2: Small gap below</div>
<div class="sb-bg-surface sb-text-text sb-p-3 sb-mb-4 sb-border-2 sb-border-neutral">mb-4: Medium gap below</div>
<div class="sb-bg-surface sb-text-text sb-p-3 sb-mb-8 sb-border-2 sb-border-neutral">mb-8: Large gap below</div>
<div class="sb-bg-surface sb-text-text sb-p-3 sb-border-2 sb-border-neutral">Next element after gaps</div>

---

Gap

Space between flex/grid children. Cleaner than margins.

<!-- gap-2 -->
<div class="sb-flex sb-gap-2">
  <div class="sb-bg-primary sb-text-text sb-p-3">A</div>
  <div class="sb-bg-primary sb-text-text sb-p-3">B</div>
  <div class="sb-bg-primary sb-text-text sb-p-3">C</div>
</div>

<!-- gap-4 -->
<div class="sb-flex sb-gap-4">
  <div class="sb-bg-primary sb-text-text sb-p-3">A</div>
  <div class="sb-bg-primary sb-text-text sb-p-3">B</div>
  <div class="sb-bg-primary sb-text-text sb-p-3">C</div>
</div>

<!-- gap-8 -->
<div class="sb-flex sb-gap-8">
  <div class="sb-bg-primary sb-text-text sb-p-3">A</div>
  <div class="sb-bg-primary sb-text-text sb-p-3">B</div>
  <div class="sb-bg-primary sb-text-text sb-p-3">C</div>
</div>

---

Quick Reference

---

Next Steps