Spacing

Playground

Use the playground to get a feel for what the different helper classes can do. For an explanation of how they work, see the How it works section below.

How It Works

The helper classes apply margin or padding 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}.

Where property can be:

• m: applies margin
• p: applies padding

Where direction can be:

• t: for top
• b: for bottom
• l: for left
• r: for right
• a: for all directions

Where size can be:

• 0: sets margin or padding to 0px
• 1: sets margin or padding to 4px
• 2: sets margin or padding to 8px
• 3: sets margin or padding to 12px
• 4: sets margin or padding to 16px
• 5: sets margin or padding to 20px
• 6: sets margin or padding to 24px
• 7: sets margin or padding to 28px
• 8: sets margin or padding to 32px
• 9: sets margin or padding to 36px
• 10: sets margin or padding to 40px
• 11: sets margin or padding to 44px
• 12: sets margin or padding to 48px
• 13: sets margin or padding to 52px
• 14: sets margin or padding to 56px
• 15: sets margin or padding to 60px
• 16: sets margin or padding to 64px
• n1: sets margin or padding to -4px
• n2: sets margin or padding to -8px
• n3: sets margin or padding to -12px
• n4: sets margin or padding to -16px
• n5: sets margin or padding to -20px
• n6: sets margin or padding to -24px
• n7: sets margin or padding to -28px
• n8: sets margin or padding to -32px
• n9: sets margin or padding to -36px
• n10: sets margin or padding to -40px
• n11: sets margin or padding to -44px
• n12: sets margin or padding to -48px
• n13: sets margin or padding to -52px
• n14: sets margin or padding to -56px
• n15: sets margin or padding to -60px
• n16: sets margin or padding to -64px

Breakpoints

You can also use these helper classes to apply margin or padding at a given breakpoint also using the following syntax: {property}{direction}-{breakpoint}-{size}. This does not apply to xs as it is inferred; e.g. ma-xs-2 equals ma-2.