Spacing

A range of classes and variables to assign margin and padding property values to elements. There 6 different spacing values ranging from tiny to huge. There are also responsive classes available to adjust an element's spacing for each breakpoint.

Classes

Use classes to assign margin or padding values to adjust individual properties, all properties, and vertical and horizontal properties. Classes are named using the format:

• {property}--{size} for all sides
• {property}{sides}--{size} for individual sides
• {property}{sides}-{breakpoint}-{size} for responsive

Where the property of m sets margin and p sets padding.

Where sides is one of:

• t - for classes that set margin-top or padding-top
• r - for classes that set margin-right or padding-right
• b - for classes that set margin-bottom or padding-bottom
• l - for classes that set margin-left or padding-left
• y - for classes that set both *-top and *-bottom
• x - for classes that set both *-left and *-right

Where size is one of:

• base with value set to 16px or 1rem
• tiny with value set to 8px or .5rem
• medium with value set to 24px or 1.5rem
• large with value set to 32px or 2rem
• xlarge with value set to 48px or 3rem
• huge with value set to 64px or 4rem

Responsive Classes

Using responsive classes we can adjust the padding bottom in the examples for different screen sizes. In example #1 the spacing is set to tiny on desktop and adjusts to huge on mobile using pb-sm--tiny pb--huge. In example #2 the spacing is set to large on desktop and huge on tablets using pb-md--large pb--huge.