Spacing

Responsive spacing helper classes enable to simply add or modify margin and padding properties where necessary.

Naming System

The classes are named using the format [property][sides]-[size] for xs and [property][sides]-[breakpoint]-[size] for sm, md, lg, xl, x2l, and x3l breakpoints.

Where property is one of:

• m - for classes that set margin
• p - for classes that set padding

Where sides is one of:

• t - for classes that set margin-top or padding-top
• b - for classes that set margin-bottom or padding-bottom
• l - for classes that set margin-left or padding-left
• r - for classes that set margin-right or padding-right

Where size is one of:

• 0
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• auto for classes that set the margin to auto

👉 Check the spacing scale to see the exact values of individual sizes.

Examples

Example of the margin-bottom property applied for all viewport sizes:

Example of the padding-left property applied from sm breakpoint up: