---
meta:
  title: Spacing
  description: Spacing helper classes allow you to apply margin or padding to any element in increments from 1 to 5.
  keywords: spacing helper classes, spacing classes, vuetify spacing
related:
  - /styles/elevation/
  - /styles/content/
  - /components/grids/
features:
  report: true
---

# Spacing

Update your layout without creating new classes. Spacing helpers are useful for modifying the padding and margin of an element.

<PageFeatures />

| Class | Properties |
| - | - |
| **ga-0** | gap: 0; |
| **ga-1** | gap: 4px; |
| **ga-2** | gap: 8px; |
| **ga-3** | gap: 12px; |
| **ga-4** | gap: 16px; |
| **ga-5** | gap: 20px; |
| **ga-6** | gap: 24px; |
| **ga-7** | gap: 28px; |
| **ga-8** | gap: 32px; |
| **ga-9** | gap: 36px; |
| **ga-10** | gap: 40px; |
| **ga-11** | gap: 44px; |
| **ga-12** | gap: 48px; |
| **ga-13** | gap: 52px; |
| **ga-14** | gap: 56px; |
| **ga-15** | gap: 60px; |
| **ga-16** | gap: 64px; |
| **ma-0** | margin: 0; |
| **ma-1** | margin: 4px; |
| **ma-2** | margin: 8px; |
| **ma-3** | margin: 12px; |
| **ma-4** | margin: 16px; |
| **ma-5** | margin: 20px; |
| **ma-6** | margin: 24px; |
| **ma-7** | margin: 28px; |
| **ma-8** | margin: 32px; |
| **ma-9** | margin: 36px; |
| **ma-10** | margin: 40px; |
| **ma-11** | margin: 44px; |
| **ma-12** | margin: 48px; |
| **ma-13** | margin: 52px; |
| **ma-14** | margin: 56px; |
| **ma-15** | margin: 60px; |
| **ma-16** | margin: 64px; |
| **ml-0** | margin-left: 0; |
| **ml-1** | margin-left: 4px; |
| **ml-2** | margin-left: 8px; |
| **ml-3** | margin-left: 12px; |
| **ml-4** | margin-left: 16px; |
| **ml-5** | margin-left: 20px; |
| **ml-6** | margin-left: 24px; |
| **ml-7** | margin-left: 28px; |
| **ml-8** | margin-left: 32px; |
| **ml-9** | margin-left: 36px; |
| **ml-10** | margin-left: 40px; |
| **ml-11** | margin-left: 44px; |
| **ml-12** | margin-left: 48px; |
| **ml-13** | margin-left: 52px; |
| **ml-14** | margin-left: 56px; |
| **ml-15** | margin-left: 60px; |
| **ml-16** | margin-left: 64px; |
| **ms-0** | margin-left: 0; (LTR) / margin-right: 0; (RTL) |
| **ms-1** | margin-left: 4px; (LTR) / margin-right: 4px; (RTL) |
| **ms-2** | margin-left: 8px; (LTR) / margin-right: 8px; (RTL) |
| **ms-3** | margin-left: 12px; (LTR) / margin-right: 12px; (RTL) |
| **ms-4** | margin-left: 16px; (LTR) / margin-right: 16px; (RTL) |
| **ms-5** | margin-left: 20px; (LTR) / margin-right: 20px; (RTL) |
| **ms-6** | margin-left: 24px; (LTR) / margin-right: 24px; (RTL) |
| **ms-7** | margin-left: 28px; (LTR) / margin-right: 28px; (RTL) |
| **ms-8** | margin-left: 32px; (LTR) / margin-right: 32px; (RTL) |
| **ms-9** | margin-left: 36px; (LTR) / margin-right: 36px; (RTL) |
| **ms-10** | margin-left: 40px; (LTR) / margin-right: 40px; (RTL) |
| **ms-11** | margin-left: 44px; (LTR) / margin-right: 44px; (RTL) |
| **ms-12** | margin-left: 48px; (LTR) / margin-right: 48px; (RTL) |
| **ms-13** | margin-left: 52px; (LTR) / margin-right: 52px; (RTL) |
| **ms-14** | margin-left: 56px; (LTR) / margin-right: 56px; (RTL) |
| **ms-15** | margin-left: 60px; (LTR) / margin-right: 60px; (RTL) |
| **ms-16** | margin-left: 64px; (LTR) / margin-right: 64px; (RTL) |
| **mt-0** | margin-top: 0; |
| **mt-1** | margin-top: 4px; |
| **mt-2** | margin-top: 8px; |
| **mt-3** | margin-top: 12px; |
| **mt-4** | margin-top: 16px; |
| **mt-5** | margin-top: 20px; |
| **mt-6** | margin-top: 24px; |
| **mt-7** | margin-top: 28px; |
| **mt-8** | margin-top: 32px; |
| **mt-9** | margin-top: 36px; |
| **mt-10** | margin-top: 40px; |
| **mt-11** | margin-top: 44px; |
| **mt-12** | margin-top: 48px; |
| **mt-13** | margin-top: 52px; |
| **mt-14** | margin-top: 56px; |
| **mt-15** | margin-top: 60px; |
| **mt-16** | margin-top: 64px; |
| **mr-0** | margin-right: 0; |
| **mr-1** | margin-right: 4px; |
| **mr-2** | margin-right: 8px; |
| **mr-3** | margin-right: 12px; |
| **mr-4** | margin-right: 16px; |
| **mr-5** | margin-right: 20px; |
| **mr-6** | margin-right: 24px; |
| **mr-7** | margin-right: 28px; |
| **mr-8** | margin-right: 32px; |
| **mr-9** | margin-right: 36px; |
| **mr-10** | margin-right: 40px; |
| **mr-11** | margin-right: 44px; |
| **mr-12** | margin-right: 48px; |
| **mr-13** | margin-right: 52px; |
| **mr-14** | margin-right: 56px; |
| **mr-15** | margin-right: 60px; |
| **mr-16** | margin-right: 64px; |
| **me-0** | margin-right: 0; (LTR) / margin-left: 0; (RTL) |
| **me-1** | margin-right: 4px; (LTR) / margin-left: 4px; (RTL) |
| **me-2** | margin-right: 8px; (LTR) / margin-left: 8px; (RTL) |
| **me-3** | margin-right: 12px; (LTR) / margin-left: 12px; (RTL) |
| **me-4** | margin-right: 16px; (LTR) / margin-left: 16px; (RTL) |
| **me-5** | margin-right: 20px; (LTR) / margin-left: 20px; (RTL) |
| **me-6** | margin-right: 24px; (LTR) / margin-left: 24px; (RTL) |
| **me-7** | margin-right: 28px; (LTR) / margin-left: 28px; (RTL) |
| **me-8** | margin-right: 32px; (LTR) / margin-left: 32px; (RTL) |
| **me-9** | margin-right: 36px; (LTR) / margin-left: 36px; (RTL) |
| **me-10** | margin-right: 40px; (LTR) / margin-left: 40px; (RTL) |
| **me-11** | margin-right: 44px; (LTR) / margin-left: 44px; (RTL) |
| **me-12** | margin-right: 48px; (LTR) / margin-left: 48px; (RTL) |
| **me-13** | margin-right: 52px; (LTR) / margin-left: 52px; (RTL) |
| **me-14** | margin-right: 56px; (LTR) / margin-left: 56px; (RTL) |
| **me-15** | margin-right: 60px; (LTR) / margin-left: 60px; (RTL) |
| **me-16** | margin-right: 64px; (LTR) / margin-left: 64px; (RTL) |
| **mb-0** | margin-bottom: 0; |
| **mb-1** | margin-bottom: 4px; |
| **mb-2** | margin-bottom: 8px; |
| **mb-3** | margin-bottom: 12px; |
| **mb-4** | margin-bottom: 16px; |
| **mb-5** | margin-bottom: 20px; |
| **mb-6** | margin-bottom: 24px; |
| **mb-7** | margin-bottom: 28px; |
| **mb-8** | margin-bottom: 32px; |
| **mb-9** | margin-bottom: 36px; |
| **mb-10** | margin-bottom: 40px; |
| **mb-11** | margin-bottom: 44px; |
| **mb-12** | margin-bottom: 48px; |
| **mb-13** | margin-bottom: 52px; |
| **mb-14** | margin-bottom: 56px; |
| **mb-15** | margin-bottom: 60px; |
| **mb-16** | margin-bottom: 64px; |
| **ma-n1** | margin: -4px; |
| **ma-n2** | margin: -8px; |
| **ma-n3** | margin: -12px; |
| **ma-n4** | margin: -16px; |
| **ma-n5** | margin: -20px; |
| **ma-n6** | margin: -24px; |
| **ma-n7** | margin: -28px; |
| **ma-n8** | margin: -32px; |
| **ma-n9** | margin: -36px; |
| **ma-n10** | margin: -40px; |
| **ma-n11** | margin: -44px; |
| **ma-n12** | margin: -48px; |
| **ma-n13** | margin: -52px; |
| **ma-n14** | margin: -56px; |
| **ma-n15** | margin: -60px; |
| **ma-n16** | margin: -64px; |
| **ml-n1** | margin-left: -4px; |
| **ml-n2** | margin-left: -8px; |
| **ml-n3** | margin-left: -12px; |
| **ml-n4** | margin-left: -16px; |
| **ml-n5** | margin-left: -20px; |
| **ml-n6** | margin-left: -24px; |
| **ml-n7** | margin-left: -28px; |
| **ml-n8** | margin-left: -32px; |
| **ml-n9** | margin-left: -36px; |
| **ml-n10** | margin-left: -40px; |
| **ml-n11** | margin-left: -44px; |
| **ml-n12** | margin-left: -48px; |
| **ml-n13** | margin-left: -52px; |
| **ml-n14** | margin-left: -56px; |
| **ml-n15** | margin-left: -60px; |
| **ml-n16** | margin-left: -64px; |
| **ms-n1** | margin-left: -4px; (LTR) / margin-right: -4px; (RTL) |
| **ms-n2** | margin-left: -8px; (LTR) / margin-right: -8px; (RTL) |
| **ms-n3** | margin-left: -12px; (LTR) / margin-right: -12px; (RTL) |
| **ms-n4** | margin-left: -16px; (LTR) / margin-right: -16px; (RTL) |
| **ms-n5** | margin-left: -20px; (LTR) / margin-right: -20px; (RTL) |
| **ms-n6** | margin-left: -24px; (LTR) / margin-right: -24px; (RTL) |
| **ms-n7** | margin-left: -28px; (LTR) / margin-right: -28px; (RTL) |
| **ms-n8** | margin-left: -32px; (LTR) / margin-right: -32px; (RTL) |
| **ms-n9** | margin-left: -36px; (LTR) / margin-right: -36px; (RTL) |
| **ms-n10** | margin-left: -40px; (LTR) / margin-right: -40px; (RTL) |
| **ms-n11** | margin-left: -44px; (LTR) / margin-right: -44px; (RTL) |
| **ms-n12** | margin-left: -48px; (LTR) / margin-right: -48px; (RTL) |
| **ms-n13** | margin-left: -52px; (LTR) / margin-right: -52px; (RTL) |
| **ms-n14** | margin-left: -56px; (LTR) / margin-right: -56px; (RTL) |
| **ms-n15** | margin-left: -60px; (LTR) / margin-right: -60px; (RTL) |
| **ms-n16** | margin-left: -64px; (LTR) / margin-right: -64px; (RTL) |
| **mt-n1** | margin-top: -4px; |
| **mt-n2** | margin-top: -8px; |
| **mt-n3** | margin-top: -12px; |
| **mt-n4** | margin-top: -16px; |
| **mt-n5** | margin-top: -20px; |
| **mt-n6** | margin-top: -24px; |
| **mt-n7** | margin-top: -28px; |
| **mt-n8** | margin-top: -32px; |
| **mt-n9** | margin-top: -36px; |
| **mt-n10** | margin-top: -40px; |
| **mt-n11** | margin-top: -44px; |
| **mt-n12** | margin-top: -48px; |
| **mt-n13** | margin-top: -52px; |
| **mt-n14** | margin-top: -56px; |
| **mt-n15** | margin-top: -60px; |
| **mt-n16** | margin-top: -64px; |
| **mr-n1** | margin-right: -4px; |
| **mr-n2** | margin-right: -8px; |
| **mr-n3** | margin-right: -12px; |
| **mr-n4** | margin-right: -16px; |
| **mr-n5** | margin-right: -20px; |
| **mr-n6** | margin-right: -24px; |
| **mr-n7** | margin-right: -28px; |
| **mr-n8** | margin-right: -32px; |
| **mr-n9** | margin-right: -36px; |
| **mr-n10** | margin-right: -40px; |
| **mr-n11** | margin-right: -44px; |
| **mr-n12** | margin-right: -48px; |
| **mr-n13** | margin-right: -52px; |
| **mr-n14** | margin-right: -56px; |
| **mr-n15** | margin-right: -60px; |
| **mr-n16** | margin-right: -64px; |
| **me-n1** | margin-right: -4px; (LTR) / margin-left: -4px; (RTL) |
| **me-n2** | margin-right: -8px; (LTR) / margin-left: -8px; (RTL) |
| **me-n3** | margin-right: -12px; (LTR) / margin-left: -12px; (RTL) |
| **me-n4** | margin-right: -16px; (LTR) / margin-left: -16px; (RTL) |
| **me-n5** | margin-right: -20px; (LTR) / margin-left: -20px; (RTL) |
| **me-n6** | margin-right: -24px; (LTR) / margin-left: -24px; (RTL) |
| **me-n7** | margin-right: -28px; (LTR) / margin-left: -28px; (RTL) |
| **me-n8** | margin-right: -32px; (LTR) / margin-left: -32px; (RTL) |
| **me-n9** | margin-right: -36px; (LTR) / margin-left: -36px; (RTL) |
| **me-n10** | margin-right: -40px; (LTR) / margin-left: -40px; (RTL) |
| **me-n11** | margin-right: -44px; (LTR) / margin-left: -44px; (RTL) |
| **me-n12** | margin-right: -48px; (LTR) / margin-left: -48px; (RTL) |
| **me-n13** | margin-right: -52px; (LTR) / margin-left: -52px; (RTL) |
| **me-n14** | margin-right: -56px; (LTR) / margin-left: -56px; (RTL) |
| **me-n15** | margin-right: -60px; (LTR) / margin-left: -60px; (RTL) |
| **me-n16** | margin-right: -64px; (LTR) / margin-left: -64px; (RTL) |
| **mb-n1** | margin-bottom: -4px; |
| **mb-n2** | margin-bottom: -8px; |
| **mb-n3** | margin-bottom: -12px; |
| **mb-n4** | margin-bottom: -16px; |
| **mb-n5** | margin-bottom: -20px; |
| **mb-n6** | margin-bottom: -24px; |
| **mb-n7** | margin-bottom: -28px; |
| **mb-n8** | margin-bottom: -32px; |
| **mb-n9** | margin-bottom: -36px; |
| **mb-n10** | margin-bottom: -40px; |
| **mb-n11** | margin-bottom: -44px; |
| **mb-n12** | margin-bottom: -48px; |
| **mb-n13** | margin-bottom: -52px; |
| **mb-n14** | margin-bottom: -56px; |
| **mb-n15** | margin-bottom: -60px; |
| **mb-n16** | margin-bottom: -64px; |
| **ma-auto** | margin: auto; |
| **ml-auto** | margin-left: auto; |
| **ms-auto** | margin-left: auto; (LTR) / margin-right: auto; (RTL) |
| **mt-auto** | margin-top: auto; |
| **mr-auto** | margin-right: auto; |
| **me-auto** | margin-right: auto; (LTR) / margin-left: auto; (RTL) |
| **mb-auto** | margin-bottom: auto; |
| **pa-0** | padding: 0; |
| **pa-1** | padding: 4px; |
| **pa-2** | padding: 8px; |
| **pa-3** | padding: 12px; |
| **pa-4** | padding: 16px; |
| **pa-5** | padding: 20px; |
| **pa-6** | padding: 24px; |
| **pa-7** | padding: 28px; |
| **pa-8** | padding: 32px; |
| **pa-9** | padding: 36px; |
| **pa-10** | padding: 40px; |
| **pa-11** | padding: 44px; |
| **pa-12** | padding: 48px; |
| **pa-13** | padding: 52px; |
| **pa-14** | padding: 56px; |
| **pa-15** | padding: 60px; |
| **pa-16** | padding: 64px; |
| **pl-0** | padding-left: 0; |
| **pl-1** | padding-left: 4px; |
| **pl-2** | padding-left: 8px; |
| **pl-3** | padding-left: 12px; |
| **pl-4** | padding-left: 16px; |
| **pl-5** | padding-left: 20px; |
| **pl-6** | padding-left: 24px; |
| **pl-7** | padding-left: 28px; |
| **pl-8** | padding-left: 32px; |
| **pl-9** | padding-left: 36px; |
| **pl-10** | padding-left: 40px; |
| **pl-11** | padding-left: 44px; |
| **pl-12** | padding-left: 48px; |
| **pl-13** | padding-left: 52px; |
| **pl-14** | padding-left: 56px; |
| **pl-15** | padding-left: 60px; |
| **pl-16** | padding-left: 64px; |
| **ps-0** | padding-left: 0; (LTR) / padding-right: 0; (RTL) |
| **ps-1** | padding-left: 4px; (LTR) / padding-right: 4px; (RTL) |
| **ps-2** | padding-left: 8px; (LTR) / padding-right: 8px; (RTL) |
| **ps-3** | padding-left: 12px; (LTR) / padding-right: 12px; (RTL) |
| **ps-4** | padding-left: 16px; (LTR) / padding-right: 16px; (RTL) |
| **ps-5** | padding-left: 20px; (LTR) / padding-right: 20px; (RTL) |
| **ps-6** | padding-left: 24px; (LTR) / padding-right: 24px; (RTL) |
| **ps-7** | padding-left: 28px; (LTR) / padding-right: 28px; (RTL) |
| **ps-8** | padding-left: 32px; (LTR) / padding-right: 32px; (RTL) |
| **ps-9** | padding-left: 36px; (LTR) / padding-right: 36px; (RTL) |
| **ps-10** | padding-left: 40px; (LTR) / padding-right: 40px; (RTL) |
| **ps-11** | padding-left: 44px; (LTR) / padding-right: 44px; (RTL) |
| **ps-12** | padding-left: 48px; (LTR) / padding-right: 48px; (RTL) |
| **ps-13** | padding-left: 52px; (LTR) / padding-right: 52px; (RTL) |
| **ps-14** | padding-left: 56px; (LTR) / padding-right: 56px; (RTL) |
| **ps-15** | padding-left: 60px; (LTR) / padding-right: 60px; (RTL) |
| **ps-16** | padding-left: 64px; (LTR) / padding-right: 64px; (RTL) |
| **pt-0** | padding-top: 0; |
| **pt-1** | padding-top: 4px; |
| **pt-2** | padding-top: 8px; |
| **pt-3** | padding-top: 12px; |
| **pt-4** | padding-top: 16px; |
| **pt-5** | padding-top: 20px; |
| **pt-6** | padding-top: 24px; |
| **pt-7** | padding-top: 28px; |
| **pt-8** | padding-top: 32px; |
| **pt-9** | padding-top: 36px; |
| **pt-10** | padding-top: 40px; |
| **pt-11** | padding-top: 44px; |
| **pt-12** | padding-top: 48px; |
| **pt-13** | padding-top: 52px; |
| **pt-14** | padding-top: 56px; |
| **pt-15** | padding-top: 60px; |
| **pt-16** | padding-top: 64px; |
| **pr-0** | padding-right: 0; |
| **pr-1** | padding-right: 4px; |
| **pr-2** | padding-right: 8px; |
| **pr-3** | padding-right: 12px; |
| **pr-4** | padding-right: 16px; |
| **pr-5** | padding-right: 20px; |
| **pr-6** | padding-right: 24px; |
| **pr-7** | padding-right: 28px; |
| **pr-8** | padding-right: 32px; |
| **pr-9** | padding-right: 36px; |
| **pr-10** | padding-right: 40px; |
| **pr-11** | padding-right: 44px; |
| **pr-12** | padding-right: 48px; |
| **pr-13** | padding-right: 52px; |
| **pr-14** | padding-right: 56px; |
| **pr-15** | padding-right: 60px; |
| **pr-16** | padding-right: 64px; |
| **pe-0** | padding-right: 0; (LTR) / padding-left: 0; (RTL) |
| **pe-1** | padding-right: 4px; (LTR) / padding-left: 4px; (RTL) |
| **pe-2** | padding-right: 8px; (LTR) / padding-left: 8px; (RTL) |
| **pe-3** | padding-right: 12px; (LTR) / padding-left: 12px; (RTL) |
| **pe-4** | padding-right: 16px; (LTR) / padding-left: 16px; (RTL) |
| **pe-5** | padding-right: 20px; (LTR) / padding-left: 20px; (RTL) |
| **pe-6** | padding-right: 24px; (LTR) / padding-left: 24px; (RTL) |
| **pe-7** | padding-right: 28px; (LTR) / padding-left: 28px; (RTL) |
| **pe-8** | padding-right: 32px; (LTR) / padding-left: 32px; (RTL) |
| **pe-9** | padding-right: 36px; (LTR) / padding-left: 36px; (RTL) |
| **pe-10** | padding-right: 40px; (LTR) / padding-left: 40px; (RTL) |
| **pe-11** | padding-right: 44px; (LTR) / padding-left: 44px; (RTL) |
| **pe-12** | padding-right: 48px; (LTR) / padding-left: 48px; (RTL) |
| **pe-13** | padding-right: 52px; (LTR) / padding-left: 52px; (RTL) |
| **pe-14** | padding-right: 56px; (LTR) / padding-left: 56px; (RTL) |
| **pe-15** | padding-right: 60px; (LTR) / padding-left: 60px; (RTL) |
| **pe-16** | padding-right: 64px; (LTR) / padding-left: 64px; (RTL) |
| **pb-0** | padding-bottom: 0; |
| **pb-1** | padding-bottom: 4px; |
| **pb-2** | padding-bottom: 8px; |
| **pb-3** | padding-bottom: 12px; |
| **pb-4** | padding-bottom: 16px; |
| **pb-5** | padding-bottom: 20px; |
| **pb-6** | padding-bottom: 24px; |
| **pb-7** | padding-bottom: 28px; |
| **pb-8** | padding-bottom: 32px; |
| **pb-9** | padding-bottom: 36px; |
| **pb-10** | padding-bottom: 40px; |
| **pb-11** | padding-bottom: 44px; |
| **pb-12** | padding-bottom: 48px; |
| **pb-13** | padding-bottom: 52px; |
| **pb-14** | padding-bottom: 56px; |
| **pb-15** | padding-bottom: 60px; |
| **pb-16** | padding-bottom: 64px; { style="max-height: 420px;" fixed-header } |

<PromotedEntry />

## Usage

The helper classes apply **margin**, **padding**, or **gap** to an element ranging from _0 to 16_. Each size increment was designed to align with common Material Design spacings. These classes can be applied using the following format `{property}{direction}-{size}`.

<ExamplesExample file="spacing/usage" />

The **property** applies the type of spacing:

- `m` - applies `margin`
- `p` - applies `padding`
- `g` - applies `gap`

The **direction** designates the side the property applies to:

- `t` - applies the spacing for `margin-top` and `padding-top`
- `b` - applies the spacing for `margin-bottom` and `padding-bottom`
- `l` - applies the spacing for `margin-left` and `padding-left`
- `r` - applies the spacing for `margin-right`, `padding-right`, and `row-gap`
- `s` - applies the spacing for `margin-left`/`padding-left` _(in LTR mode)_ and `margin-right`/`padding-right` _(in RTL mode)_
- `e` - applies the spacing for `margin-right`/`padding-right` _(in LTR mode)_ and `margin-left`/`padding-left` _(in RTL mode)_
- `x` - applies the spacing for margin and padding `*-left` and `*-right`
- `y` - applies the spacing for margin and padding `*-top` and `*-bottom`
- `a` - applies the spacing for `margin`, `padding` and `gap` in all directions
- `c` - applies the spacing for `column-gap`

The **size** controls the increment of the property in 4px intervals:

- `0` - eliminates all `margin`, `padding` or `gap` by setting it to `0`
- `1` - sets `margin`, `padding` or `gap` to 4px
- `2` - sets `margin`, `padding` or `gap` to 8px
- `3` - sets `margin`, `padding` or `gap` to 12px
- `4` - sets `margin`, `padding` or `gap` to 16px
- `5` - sets `margin`, `padding` or `gap` to 20px
- `6` - sets `margin`, `padding` or `gap` to 24px
- `7` - sets `margin`, `padding` or `gap` to 28px
- `8` - sets `margin`, `padding` or `gap` to 32px
- `9` - sets `margin`, `padding` or `gap` to 36px
- `10` - sets `margin`, `padding` or `gap` to 40px
- `11` - sets `margin`, `padding` or `gap` to 44px
- `12` - sets `margin`, `padding` or `gap` to 48px
- `13` - sets `margin`, `padding` or `gap` to 52px
- `14` - sets `margin`, `padding` or `gap` to 56px
- `15` - sets `margin`, `padding` or `gap` to 60px
- `16` - sets `margin`, `padding` or `gap` to 64px
- `n1` - sets `margin` to -4px
- `n2` - sets `margin` to -8px
- `n3` - sets `margin` to -12px
- `n4` - sets `margin` to -16px
- `n5` - sets `margin` to -20px
- `n6` - sets `margin` to -24px
- `n7` - sets `margin` to -28px
- `n8` - sets `margin` to -32px
- `n9` - sets `margin` to -36px
- `n10` - sets `margin` to -40px
- `n11` - sets `margin` to -44px
- `n12` - sets `margin` to -48px
- `n13` - sets `margin` to -52px
- `n14` - sets `margin` to -56px
- `n15` - sets `margin` to -60px
- `n16` - sets `margin` to -64px
- `auto` - sets the spacing to **auto**

## Examples

### Breakpoints

Vuetify comes with a 12 point grid system built using Flexbox. Spacing is used to create specific layouts within an application's content. It consists of 5 media breakpoints used to target specific screen sizes or orientations: **xs**, **sm**, **md**, **lg** and **xl**. The default resolutions are defined below in the _Viewport Breakpoints_ table and can be modified by customizing the [breakpoint service config](/features/display-and-platform/).

<FeaturesBreakpointsTable />

The helper classes apply **margin** or **padding** at a given breakpoint. These classes can be applied using the following format: `{property}{direction}-{breakpoint}-{size}`. This does not apply to **xs** as it is inferred; e.g. `ma-xs-2` equals `ma-2`.

<ExamplesExample file="spacing/breakpoints" />

### Horizontal

Margin helper classes let you easily center content horizontally.

<ExamplesExample file="spacing/horizontal" />

### Gap

Use the gap helper classes to easily apply a gap between content.

<ExamplesExample file="spacing/gap" />

### Negative margin

Margin can also be applied negatively at the same **1 to 16** intervals.

<ExamplesExample file="spacing/negative-margin" />
